import React , { Fragment , useCallback , useEffect } from 'react' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage , I18nProvider } from '@kbn/i18n-react' ; import { EuiEmptyPrompt , EuiLink , EuiButton } from '@elastic/eui' ; import { ApplicationStart } from 'kibana/public' ; import { useHistory , useLocation } from 'react-router-dom' ; import { TableListView } from '../../../../../src/plugins/kibana_react/public' ; import { deleteSavedWorkspace , findSavedWorkspace } from '../helpers/saved_workspace_utils' ; import { getEditPath , getEditUrl , getNewPath , setBreadcrumbs } from '../services/url' ; import { GraphWorkspaceSavedObject } from '../types' ; import { GraphServices } from '../application' ; export interface ListingRouteProps { deps : GraphServices ; } export function ListingRoute ( { deps : { chrome , savedObjects , savedObjectsClient , coreStart , capabilities , addBasePath } , } ) { const listingLimit = savedObjects . settings . getListingLimit ( ) ; const initialPageSize = savedObjects . settings . getPerPage ( ) ; const history = useHistory ( ) ; const query = new URLSearchParams ( useLocation ( ) . search ) ; const initialFilter = query . get ( 'filter' ) || '' ; useEffect ( ( ) => { setBreadcrumbs ( { chrome } ) ; } , [ chrome ] ) ; const createItem = useCallback ( ( ) => { history . push ( getNewPath ( ) ) ; } , [ history ] ) ; const findItems = useCallback ( ( search ) => { return findSavedWorkspace ( { savedObjectsClient , basePath : coreStart . http . basePath } , search , listingLimit ) ; } , [ coreStart . http . basePath , listingLimit , savedObjectsClient ] ) ; const editItem = useCallback ( ( savedWorkspace ) => { history . push ( getEditPath ( savedWorkspace ) ) ; } , [ history ] ) ; const getViewUrl = useCallback ( ( savedWorkspace ) => getEditUrl ( addBasePath , savedWorkspace ) , [ addBasePath ] ) ; const deleteItems = useCallback ( async ( savedWorkspaces ) => { await deleteSavedWorkspace ( savedObjectsClient , savedWorkspaces . map ( ( cur ) => cur . id ! ) ) ; } , [ savedObjectsClient ] ) ; return ( < I18nProvider > < TableListView tableCaption = { i18n . translate ( 'xpack.graph.listing.graphsTitle' , { defaultMessage : 'Graphs' , } ) } headingId = "graphListingHeading" rowHeader = "title" createItem = { capabilities . graph . save ? createItem : undefined } findItems = { findItems } deleteItems = { capabilities . graph . delete ? deleteItems : undefined } editItem = { capabilities . graph . save ? editItem : undefined } tableColumns = { getTableColumns ( getViewUrl ) } listingLimit = { listingLimit } initialFilter = { initialFilter } initialPageSize = { initialPageSize } emptyPrompt = { getNoItemsMessage ( capabilities . graph . save === false , createItem , coreStart . application ) } toastNotifications = { coreStart . notifications . toasts } entityName = { i18n . translate ( 'xpack.graph.listing.table.entityName' , { defaultMessage : 'graph' , } ) } entityNamePlural = { i18n . translate ( 'xpack.graph.listing.table.entityNamePlural' , { defaultMessage : 'graphs' , } ) } tableListTitle = { i18n . translate ( 'xpack.graph.listing.graphsTitle' , { defaultMessage : 'Graphs' , } ) } theme = { coreStart . theme } / > < /I18nProvider>); } function getNoItemsMessage ( hideWriteControls , createItem , application ) { if ( hideWriteControls ) { return ( < EuiEmptyPrompt iconType = "graphApp" title = { < h1 id = "graphListingHeading" > < FormattedMessage id = "xpack.graph.listing.noItemsMessage" defaultMessage = "Looks like you don't have any graphs." / > < /h1>}/ > ) ; } const sampleDataUrl = `${ application . getUrlForApp ( 'home' ) }#/tutorial_directory/sampleData` ; return ( < EuiEmptyPrompt iconType = "graphApp" title = { < h1 id = "graphListingHeading" > < FormattedMessage id = "xpack.graph.listing.createNewGraph.title" defaultMessage = "Create your first graph" / > < /h1>} body={<Fragment> < p > < FormattedMessage id = "xpack.graph.listing.createNewGraph.combineDataViewFromKibanaAppDescription" defaultMessage = "Discover patterns and relationships in your Elasticsearch indices." / > < /p> < p > < FormattedMessage id = "xpack.graph.listing.createNewGraph.newToKibanaDescription" defaultMessage = "New to Kibana? Get started with {sampleDataInstallLink}." values = { { sampleDataInstallLink : ( < EuiLink href = { sampleDataUrl } > < FormattedMessage id = "xpack.graph.listing.createNewGraph.sampleDataInstallLinkText" defaultMessage = "sample data" / > < /EuiLink>), } } /> < /p> < /Fragment>} actions={<EuiButton onClick={createItem} fill iconType="plusInCircle" data-test-subj="graphCreateGraphPromptButton"> < FormattedMessage id = "xpack.graph.listing.createNewGraph.createButtonLabel" defaultMessage = "Create graph" / > < /EuiButton>}/ > ) ; } interface DataColumn { field : string ; name : string ; sortable ? : boolean ; render ? : ( value : string , item : GraphWorkspaceSavedObject ) => React . ReactNode ; dataType ? : 'auto' | 'string' | 'number' | 'date' | 'boolean' ; } function getTableColumns ( getViewUrl ) { return [ { field : 'title' , name : i18n . translate ( 'xpack.graph.listing.table.titleColumnName' , { defaultMessage : 'Title' , } ) , sortable : true , render : ( field , record ) => ( < EuiLink href = { getViewUrl ( record ) } data - test - subj = { `graphListingTitleLink-${ record . title . split ( ' ' ) . join ( '-' ) }` } > { field } < /EuiLink>), } , { field : 'description' , name : i18n . translate ( 'xpack.graph.listing.table.descriptionColumnName' , { defaultMessage : 'Description' , } ) , dataType : 'string' , sortable : true , } , ] ; }