import './visualize_listing.scss' ; import React , { useCallback , useRef , useMemo , useEffect } from 'react' ; import { i18n } from '@osd/i18n' ; import { useUnmount , useMount } from 'react-use' ; import { useLocation } from 'react-router-dom' ; import { useOpenSearchDashboards , TableListView , } from '../../../../opensearch_dashboards_react/public' ; import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../visualizations/public' ; import { VisualizeServices } from '../types' ; import { VisualizeConstants } from '../visualize_constants' ; import { getTableColumns , getNoItemsMessage } from '../utils' ; export const VisualizeListing = ( ) => { const { services : { application , chrome , history , savedVisualizations , toastNotifications , visualizations , savedObjects , savedObjectsPublic , uiSettings , visualizeCapabilities , } , } = useOpenSearchDashboards < VisualizeServices > ( ) ; const { pathname } = useLocation ( ) ; const closeNewVisModal = useRef ( ( ) => { } ) ; const listingLimit = savedObjectsPublic . settings . getListingLimit ( ) ; useEffect ( ( ) => { if ( pathname === '/new' ) { closeNewVisModal . current = visualizations . showNewVisModal ( { onClose : ( ) => { history . push ( VisualizeConstants . LANDING_PAGE_PATH ) ; } , } ) ; } else { closeNewVisModal . current ( ) ; } } , [ history , pathname , visualizations ] ) ; useMount ( ( ) => { chrome . setBreadcrumbs ( [ { text : i18n . translate ( 'visualize.visualizeListingBreadcrumbsTitle' , { defaultMessage : 'Visualize' , } ) , } , ] ) ; chrome . docTitle . change ( i18n . translate ( 'visualize.listingPageTitle' , { defaultMessage : 'Visualize' } ) ) ; } ) ; useUnmount ( ( ) => closeNewVisModal . current ( ) ) ; const createNewVis = useCallback ( ( ) => { closeNewVisModal . current = visualizations . showNewVisModal ( ) ; } , [ visualizations ] ) ; const editItem = useCallback ( ( { editUrl , editApp } ) => { if ( editApp ) { application . navigateToApp ( editApp , { path : editUrl } ) ; return ; } history . push ( editUrl ) ; } , [ application , history ] ) ; const noItemsFragment = useMemo ( ( ) => getNoItemsMessage ( createNewVis ) , [ createNewVis ] ) ; const tableColumns = useMemo ( ( ) => getTableColumns ( application , history ) , [ application , history ] ) ; const fetchItems = useCallback ( ( filter ) => { const isLabsEnabled = uiSettings . get ( VISUALIZE_ENABLE_LABS_SETTING ) ; return savedVisualizations . findListItems ( filter , listingLimit ) . then ( ( { total , hits } ) => ( { total , hits : hits . filter ( ( result ) => isLabsEnabled || result . type ?. stage !== 'experimental' ) , } ) ) ; } , [ listingLimit , savedVisualizations , uiSettings ] ) ; const deleteItems = useCallback ( async ( selectedItems ) => { await Promise . all ( selectedItems . map ( ( item ) => savedObjects . client . delete ( item . savedObjectType , item . id ) ) ) . catch ( ( error ) => { toastNotifications . addError ( error , { title : i18n . translate ( 'visualize.visualizeListingDeleteErrorTitle' , { defaultMessage : 'Error deleting visualization' , } ) , } ) ; } ) ; } , [ savedObjects . client , toastNotifications ] ) ; return ( < TableListView headingId = "visualizeListingHeading" createItem = { createNewVis } findItems = { fetchItems } deleteItems = { visualizeCapabilities . delete ? deleteItems : undefined } editItem = { visualizeCapabilities . save ? editItem : undefined } tableColumns = { tableColumns } listingLimit = { listingLimit } initialPageSize = { savedObjectsPublic . settings . getPerPage ( ) } initialFilter = { '' } noItemsFragment = { noItemsFragment } entityName = { i18n . translate ( 'visualize.listing.table.entityName' , { defaultMessage : 'visualization' , } ) } entityNamePlural = { i18n . translate ( 'visualize.listing.table.entityNamePlural' , { defaultMessage : 'visualizations' , } ) } tableListTitle = { i18n . translate ( 'visualize.listing.table.listTitle' , { defaultMessage : 'Visualizations' , } ) } toastNotifications = { toastNotifications } / > ) ; } ;