import React, { useContext } from 'react' import { useTranslation } from 'react-i18next' import { Select, Space, Tooltip, Input, Checkbox, message, Menu } from 'antd' import { MenuProps } from 'antd/lib/menu' import { ReloadOutlined, LoadingOutlined, ExportOutlined, ArrowLeftOutlined } from '@ant-design/icons' import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane' import { Card, ColumnsSelector, TimeRangeSelector, Toolbar, MultiSelect, Head } from 'components' import { CacheContext, useLocalStorageState } from 'utils' import SlowQueriesTable from './SlowQueriesTable' import useSlowQueryTableController, { DEF_SLOW_QUERY_COLUMN_KEYS } from './useSlowQueryTableController' import styles from './List.module.less' import { useNavigate } from 'react-router' const { Option } = Select const { Search } = Input const SLOW_QUERY_VISIBLE_COLUMN_KEYS = 'slow_query.visible_column_keys' const SLOW_QUERY_SHOW_FULL_SQL = 'slow_query.show_full_sql' const LIMITS = [100, 200, 500, 1000] function List() { const { t } = useTranslation() const navigate = useNavigate() const slowQueryCacheMgr = useContext(CacheContext) const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState( SLOW_QUERY_VISIBLE_COLUMN_KEYS, DEF_SLOW_QUERY_COLUMN_KEYS, true ) const [showFullSQL, setShowFullSQL] = useLocalStorageState( SLOW_QUERY_SHOW_FULL_SQL, false ) const controller = useSlowQueryTableController( slowQueryCacheMgr, visibleColumnKeys, showFullSQL ) const { queryOptions, setQueryOptions, refresh, allSchemas, loadingSlowQueries, tableColumns, downloadCSV, downloading } = controller function exportCSV() { const hide = message.loading(t('slow_query.toolbar.exporting') + '...', 0) downloadCSV().finally(hide) } function menuItemClick({ key }: Parameters>['onClick']>[0]) { switch (key) { case 'export': exportCSV() break } } const dropdownMenu = ( }> {downloading ? t('slow_query.toolbar.exporting') : t('slow_query.toolbar.export')} ) return (

navigate(-1)}> } > setQueryOptions({ ...queryOptions, timeRange }) } /> setQueryOptions({ ...queryOptions, schemas }) } items={allSchemas} /> setQueryOptions({ ...queryOptions, searchText }) } /> {tableColumns.length > 0 && ( setShowFullSQL(e.target.checked)} > {t('slow_query.toolbar.select_columns.show_full_sql')} } /> )} {loadingSlowQueries ? ( ) : ( )} {/*

*/}

) } export default List