import React, { useEffect } from 'react' import { Space } from 'antd' import { useTranslation } from 'react-i18next' import { useLocation, useSearchParams, useNavigate } from 'react-router-dom' import { ArrowLeftOutlined } from '@ant-design/icons' import { formatSql, buildQueryFn, parseQueryFn } from 'utils' import { AnimatedSkeleton, CopyLink, Descriptions, ErrorBar, Expand, Head, HighlightSQL, Pre, TextWithInfo } from 'components' import { useLocalStorageState } from 'utils' import { CentralSlowQueryDetails, getAPI } from 'apiClient' import DetailTabs from './DetailTabs' import { useState } from 'react' export interface IPageQuery { id: string } const SLOW_QUERY_DETAIL_EXPAND = 'slow_query.detail_expand' function DetailPage() { const navigate = useNavigate() const { id } = DetailPage.parseQuery(useLocation().search) const [searchParams] = useSearchParams() const orgId = searchParams.get('orgId') const clusterId = searchParams.get('clusterId') const { t } = useTranslation() const [data, setData] = useState(null) const [isLoading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(() => { setLoading(true) getAPI() .debugPortalGetSlowQueryDetails(orgId, clusterId, id) .then((res) => { setData(res.data.log) }) .catch((e) => { setError(e) }) .finally(() => setLoading(false)) }, []) const [detailExpand, setDetailExpand] = useLocalStorageState( SLOW_QUERY_DETAIL_EXPAND, { prev_query: false, query: false, plan: false } ) const togglePrevQuery = () => setDetailExpand((prev) => ({ ...prev!, prev_query: !prev!.prev_query })) const toggleQuery = () => setDetailExpand((prev) => ({ ...prev!, query: !prev!.query })) const togglePlan = () => setDetailExpand((prev) => ({ ...prev!, plan: !prev!.plan })) return (

navigate(-1)}> {t('slow_query.detail.head.back')} } > {error && } {!!data && ( <> } > } > {(() => { if (!!data.prev_stmt && data.prev_stmt.length !== 0) return ( } > } > ) })()} } >

{data.plan}

)}

) } DetailPage.buildQuery = buildQueryFn() DetailPage.parseQuery = parseQueryFn() export default DetailPage