import { get } from 'lodash/fp' ; import React , { useCallback , useMemo } from 'react' ; import { EuiBasicTable , EuiCodeBlock , EuiButtonIcon } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { PlatformIcons } from './queries/platforms' ; import { OsqueryManagerPackagePolicyInputStream } from '../../common/types' ; export interface PackQueriesTableProps { data : OsqueryManagerPackagePolicyInputStream [ ] ; onDeleteClick ? : ( item : OsqueryManagerPackagePolicyInputStream ) => void ; onEditClick ? : ( item : OsqueryManagerPackagePolicyInputStream ) => void ; selectedItems ? : OsqueryManagerPackagePolicyInputStream [ ] ; setSelectedItems ? : ( selection : OsqueryManagerPackagePolicyInputStream [ ] ) => void ; } const PackQueriesTableComponent = ( { data , onDeleteClick , onEditClick , selectedItems , setSelectedItems , } ) => { const renderDeleteAction = useCallback ( ( item ) => ( < EuiButtonIcon color = "danger" onClick = { ( ) => onDeleteClick ( item ) } iconType = "trash" aria - label = { i18n . translate ( 'xpack.osquery.pack.queriesTable.deleteActionAriaLabel' , { defaultMessage : 'Delete {queryName}' , values : { queryName : item . id , } , } ) } />), [onDeleteClick]); const renderEditAction = useCallback ( ( item ) => ( < EuiButtonIcon color = "primary" onClick = { ( ) => onEditClick ( item ) } iconType = "pencil" aria - label = { i18n . translate ( 'xpack.osquery.pack.queriesTable.editActionAriaLabel' , { defaultMessage : 'Edit {queryName}' , values : { queryName : item . id , } , } ) } />), [onEditClick]); const renderQueryColumn = useCallback ( ( query ) => ( < EuiCodeBlock language = "sql" fontSize = "s" paddingSize = "none" transparentBackground > { query } < /EuiCodeBlock>), []); const renderPlatformColumn = useCallback ( ( platform ) => < PlatformIcons platform = { platform } / > , [ ] ) ; const renderVersionColumn = useCallback ( ( version ) => version ? `${ version }` : i18n . translate ( 'xpack.osquery.pack.queriesTable.osqueryVersionAllLabel' , { defaultMessage : 'ALL' , } ) , [ ] ) ; const columns = useMemo ( ( ) => [ { field : 'id' , name : i18n . translate ( 'xpack.osquery.pack.queriesTable.idColumnTitle' , { defaultMessage : 'ID' , } ) , width : '20%' , } , { field : 'interval' , name : i18n . translate ( 'xpack.osquery.pack.queriesTable.intervalColumnTitle' , { defaultMessage : 'Interval (s)' , } ) , width : '100px' , } , { field : 'query' , name : i18n . translate ( 'xpack.osquery.pack.queriesTable.queryColumnTitle' , { defaultMessage : 'Query' , } ) , render : renderQueryColumn , } , { field : 'platform' , name : i18n . translate ( 'xpack.osquery.pack.queriesTable.platformColumnTitle' , { defaultMessage : 'Platform' , } ) , render : renderPlatformColumn , } , { field : 'version' , name : i18n . translate ( 'xpack.osquery.pack.queriesTable.versionColumnTitle' , { defaultMessage : 'Min Osquery version' , } ) , render : renderVersionColumn , } , { name : i18n . translate ( 'xpack.osquery.pack.queriesTable.actionsColumnTitle' , { defaultMessage : 'Actions' , } ) , width : '120px' , actions : [ { render : renderEditAction , } , { render : renderDeleteAction , } , ] , } , ] , [ renderDeleteAction , renderEditAction , renderPlatformColumn , renderQueryColumn , renderVersionColumn , ] ) ; const sorting = useMemo ( ( ) => ( { sort : { field : 'id' as keyof OsqueryManagerPackagePolicyInputStream , direction : 'asc' as const , } , } ) , [ ] ) ; const itemId = useCallback ( ( item ) => get ( 'id' , item ) , [ ] ) ; const selection = useMemo ( ( ) => ( { onSelectionChange : setSelectedItems , initialSelected : selectedItems , } ) , [ selectedItems , setSelectedItems ] ) ; return ( < EuiBasicTable < OsqueryManagerPackagePolicyInputStream > items = { data } itemId = { itemId } columns = { columns } sorting = { sorting } selection = { selection } isSelectable / > ) ; } ; export const PackQueriesTable = React . memo ( PackQueriesTableComponent ) ; export default PackQueriesTable ;