import React , { FC } from 'react' ; import { EuiDescriptionList , EuiFlexGrid , EuiFlexItem , EuiPanel , EuiSpacer , EuiTitle , } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { cloneDeep } from 'lodash' ; import { NodeItem } from './nodes_list' ; import { formatToListItems } from '../models_management/expanded_row' ; import { AllocatedModels } from './allocated_models' ; import { useFieldFormatter } from '../../contexts/kibana/use_field_formatter' ; import { FIELD_FORMAT_IDS } from '../../../../../../../src/plugins/field_formats/common' ; interface ExpandedRowProps { item : NodeItem ; } export const ExpandedRow = ( { item } ) => { const bytesFormatter = useFieldFormatter ( FIELD_FORMAT_IDS . BYTES ) ; const { allocated_models : allocatedModels , attributes , memory_overview : memoryOverview , id , ... details } = cloneDeep ( item ) ; attributes [ 'ml.machine_memory' ] = bytesFormatter ( attributes [ 'ml.machine_memory' ] ) ; attributes [ 'ml.max_jvm_size' ] = bytesFormatter ( attributes [ 'ml.max_jvm_size' ] ) ; return ( < > < EuiSpacer size = { 'm' } / > < EuiFlexGrid columns = { 2 } gutterSize = { 'm' } > < EuiFlexItem > < EuiPanel > < EuiTitle size = { 'xs' } > < h5 > < FormattedMessage id = "xpack.ml.trainedModels.nodesList.expandedRow.detailsTitle" defaultMessage = "Details" / > < /h5> < /EuiTitle> < EuiSpacer size = { 'm' } / > < EuiDescriptionList compressed = { true } type = "column" listItems = { formatToListItems ( details ) } / > < /EuiPanel> < /EuiFlexItem> < EuiFlexItem > < EuiPanel > < EuiTitle size = { 'xs' } > < h5 > < FormattedMessage id = "xpack.ml.trainedModels.nodesList.expandedRow.attributesTitle" defaultMessage = "Attributes" / > < /h5> < /EuiTitle> < EuiSpacer size = { 'm' } / > < EuiDescriptionList compressed = { true } type = "column" listItems = { formatToListItems ( attributes ) } / > < /EuiPanel> < /EuiFlexItem> { allocatedModels . length > 0 ? ( < EuiFlexItem grow = { 2 } > < EuiPanel > < EuiTitle size = { 'xs' } > < h5 > < FormattedMessage id = "xpack.ml.trainedModels.nodesList.expandedRow.allocatedModelsTitle" defaultMessage = "Allocated models" / > < /h5> < /EuiTitle> < EuiSpacer size = { 'm' } / > < AllocatedModels models = { allocatedModels } /> < /EuiPanel> < /EuiFlexItem>) : null} < /EuiFlexGrid> < />); } ;