import React , { useEffect } from 'react' ; import { useParams } from 'react-router-dom' ; import { useActions , useValues } from 'kea' ; import { EuiPanel , EuiButton , EuiBasicTable , EuiBasicTableColumn } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { DELETE_BUTTON_LABEL } from '../../../shared/constants' ; import { useDecodedParams } from '../../utils/encode_path_params' ; import { getEngineBreadcrumbs } from '../engine' ; import { AppSearchPageTemplate } from '../layout' ; import { ResultFieldValue } from '../result' ; import { DOCUMENTS_TITLE } from './constants' ; import { DocumentDetailLogic } from './document_detail_logic' ; import { FieldDetails } from './types' ; const DOCUMENT_DETAIL_TITLE = ( documentId ) => i18n . translate ( 'xpack.enterpriseSearch.appSearch.documentDetail.title' , { defaultMessage : 'Document: {documentId}' , values : { documentId } , } ) ; export const DocumentDetail = ( ) => { const { dataLoading , fields } = useValues ( DocumentDetailLogic ) ; const { deleteDocument , getDocumentDetails , setFields } = useActions ( DocumentDetailLogic ) ; const { documentId } = useParams ( ) as { documentId : string ; } ; const { documentId : documentTitle } = useDecodedParams ( ) ; useEffect ( ( ) => { getDocumentDetails ( documentId ) ; return ( ) => { setFields ( [ ] ) ; } ; } , [ ] ) ; const columns = [ { name : i18n . translate ( 'xpack.enterpriseSearch.appSearch.documentDetail.fieldHeader' , { defaultMessage : 'Field' , } ) , width : '20%' , render : ( field ) => field . name , } , { name : i18n . translate ( 'xpack.enterpriseSearch.appSearch.documentDetail.valueHeader' , { defaultMessage : 'Value' , } ) , width : '80%' , render : ( { value , type } ) => < ResultFieldValue raw = { value } type = { type } / > , } , ] ; return ( < AppSearchPageTemplate pageChrome = { getEngineBreadcrumbs ( [ DOCUMENTS_TITLE , documentTitle ] ) } pageHeader = { { pageTitle : DOCUMENT_DETAIL_TITLE ( documentTitle ) , rightSideItems : [ < EuiButton color = "danger" iconType = "trash" onClick = { ( ) => deleteDocument ( documentId ) } data - test - subj = "DeleteDocumentButton" > { DELETE_BUTTON_LABEL } < /EuiButton>, ] , } } isLoading = { dataLoading } > < EuiPanel hasBorder > < EuiBasicTable columns = { columns } items = { fields } / > < /EuiPanel> < /AppSearchPageTemplate>); } ;