Skip to content

Commit

Permalink
Merge branch 'master' into fix-check-browser
Browse files Browse the repository at this point in the history
  • Loading branch information
@unbyte
unbyte authored Oct 22, 2020
2 parents 0f146cd + 6476205 commit da412a3
Show file tree
Hide file tree
Showing 8 changed files with 273 additions and 321 deletions.
66 changes: 39 additions & 27 deletions ui/lib/apps/SlowQuery/pages/Detail/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import React from 'react'
import { Space } from 'antd'
import { useTranslation } from 'react-i18next'
import { useLocation, Link } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { useToggle } from '@umijs/hooks'
import { useLocalStorageState } from '@umijs/hooks'

import client from '@lib/client'
import { useClientRequest } from '@lib/utils/useClientRequest'
import { parseQueryFn, buildQueryFn } from '@lib/utils/query'
import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
import formatSql from '@lib/utils/formatSql'
import {
Head,
Descriptions,
TextWithInfo,
Pre,
HighlightSQL,
Expand,
CopyLink,
CardTabs,
AnimatedSkeleton,
CardTabs,
CopyLink,
Descriptions,
ErrorBar,
Expand,
Head,
HighlightSQL,
Pre,
TextWithInfo,
} from '@lib/components'
import TabBasic from './DetailTabBasic'
import TabTime from './DetailTabTime'
Expand All @@ -32,6 +32,8 @@ export interface IPageQuery {
timestamp?: number
}

const SLOW_QUERY_DETAIL_EXPAND = 'slow_query.detail_expand'

function DetailPage() {
const query = DetailPage.parseQuery(useLocation().search)

Expand All @@ -48,11 +50,21 @@ function DetailPage() {
)
)

const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
const { state: prevSqlExpanded, toggle: togglePrevSqlExpanded } = useToggle(
false
const [detailExpand, setDetailExpand] = useLocalStorageState(
SLOW_QUERY_DETAIL_EXPAND,
{
prev_query: false,
query: false,
plan: false,
}
)
const { state: planExpanded, toggle: togglePlanExpanded } = useToggle(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 (
<div>
Expand All @@ -71,20 +83,20 @@ function DetailPage() {
<Descriptions>
<Descriptions.Item
span={2}
multiline={sqlExpanded}
multiline={detailExpand.query}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="slow_query.detail.head.sql" />
<Expand.Link
expanded={sqlExpanded}
onClick={() => toggleSqlExpanded()}
expanded={detailExpand.query}
onClick={toggleQuery}
/>
<CopyLink data={formatSql(data.query!)} />
</Space>
}
>
<Expand
expanded={sqlExpanded}
expanded={detailExpand.query}
collapsedContent={
<HighlightSQL sql={data.query!} compact />
}
Expand All @@ -97,20 +109,20 @@ function DetailPage() {
return (
<Descriptions.Item
span={2}
multiline={prevSqlExpanded}
multiline={detailExpand.prev_query}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="slow_query.detail.head.previous_sql" />
<Expand.Link
expanded={prevSqlExpanded}
onClick={() => togglePrevSqlExpanded()}
expanded={detailExpand.prev_query}
onClick={togglePrevQuery}
/>
<CopyLink data={formatSql(data.prev_stmt!)} />
</Space>
}
>
<Expand
expanded={prevSqlExpanded}
expanded={detailExpand.prev_query}
collapsedContent={
<HighlightSQL sql={data.prev_stmt!} compact />
}
Expand All @@ -122,19 +134,19 @@ function DetailPage() {
})()}
<Descriptions.Item
span={2}
multiline={planExpanded}
multiline={detailExpand.plan}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="slow_query.detail.head.plan" />
<Expand.Link
expanded={planExpanded}
onClick={() => togglePlanExpanded()}
expanded={detailExpand.plan}
onClick={togglePlan}
/>
<CopyLink data={data.plan ?? ''} />
</Space>
}
>
<Expand expanded={planExpanded}>
<Expand expanded={detailExpand.plan}>
<Pre noWrap>{data.plan}</Pre>
</Expand>
</Descriptions.Item>
Expand Down
39 changes: 17 additions & 22 deletions ui/lib/apps/SlowQuery/utils/tableColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ function ResultStatusBadge({ status }: { status: 'success' | 'error' }) {
//////////////////////////////////////////
const TRANS_KEY_PREFIX = 'slow_query.fields'

export const derivedFields = {
cop_proc_avg: [
{ tooltipPrefix: 'mean', fieldName: 'cop_proc_avg' },
{ tooltipPrefix: 'max', fieldName: 'cop_proc_max' },
{ tooltipPrefix: 'p90', fieldName: 'cop_proc_p90' },
],
cop_wait_avg: [
{ tooltipPrefix: 'mean', fieldName: 'cop_wait_avg' },
{ tooltipPrefix: 'max', fieldName: 'cop_wait_max' },
{ tooltipPrefix: 'p90', fieldName: 'cop_wait_p90' },
],
}

//////////////////////////////////////////

export function slowQueryColumns(
rows: SlowquerySlowQuery[],
showFullSQL?: boolean
Expand Down Expand Up @@ -73,28 +88,8 @@ export function slowQueryColumns(
tcf.bar.single('commit_backoff_time', 'ns', rows),
tcf.bar.single('resolve_lock_time', 'ns', rows),
// cop
tcf.bar.multiple(
{
bars: [
{ mean: 'cop_proc_avg' },
{ max: 'cop_proc_max' },
{ p90: 'cop_proc_p90' },
],
},
'ns',
rows
),
tcf.bar.multiple(
{
bars: [
{ mean: 'cop_wait_avg' },
{ max: 'cop_wait_avg' },
{ p90: 'cop_wait_avg' },
],
},
'ns',
rows
),
tcf.bar.multiple({ sources: derivedFields.cop_proc_avg }, 'ns', rows),
tcf.bar.multiple({ sources: derivedFields.cop_wait_avg }, 'ns', rows),
// transaction
tcf.bar.single('write_keys', 'short', rows),
tcf.bar.single('write_size', 'bytes', rows),
Expand Down
16 changes: 7 additions & 9 deletions ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import client, { ErrorStrategy, SlowquerySlowQuery } from '@lib/client'
import { calcTimeRange, TimeRange, IColumnKeys } from '@lib/components'
import useOrderState, { IOrderOptions } from '@lib/utils/useOrderState'

import { slowQueryColumns } from './tableColumns'
import { derivedFields, slowQueryColumns } from './tableColumns'
import { getSelectedFields } from '@lib/utils/tableColumnFactory'

export const DEF_SLOW_QUERY_COLUMN_KEYS: IColumnKeys = {
Expand Down Expand Up @@ -123,18 +123,16 @@ export default function useSlowQueryTableController(
querySchemas()
}, [])

// Notice: slowQueries, tableColumns, selectedFields make loop dependencies
const selectedFields = useMemo(
() => getSelectedFields(visibleColumnKeys, derivedFields).join(','),
[visibleColumnKeys]
)

const tableColumns = useMemo(
() => slowQueryColumns(slowQueries, showFullSQL),
[slowQueries, showFullSQL]
)
// make selectedFields as a string instead of an array to avoid infinite loop
// I have verified that it will cause infinite loop if we return selectedFields as an array
// so it is better to use the basic type (string, number...) instead of object as the dependency
const selectedFields = useMemo(
() => getSelectedFields(visibleColumnKeys, tableColumns).join(','),
[visibleColumnKeys, tableColumns]
)

useEffect(() => {
async function getSlowQueryList() {
setLoadingSlowQueries(true)
Expand Down
60 changes: 36 additions & 24 deletions ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react'
import { Space } from 'antd'
import { useToggle } from '@umijs/hooks'
import { useLocalStorageState } from '@umijs/hooks'
import { useTranslation } from 'react-i18next'
import {
AnimatedSkeleton,
Card,
Descriptions,
HighlightSQL,
TextWithInfo,
Pre,
CardTabs,
Expand,
CopyLink,
AnimatedSkeleton,
Descriptions,
ErrorBar,
Expand,
HighlightSQL,
Pre,
TextWithInfo,
} from '@lib/components'
import { useClientRequest } from '@lib/utils/useClientRequest'
import client from '@lib/client'
Expand All @@ -34,6 +34,8 @@ export interface IPlanDetailProps {
query: IQuery
}

const STMT_DETAIL_PLAN_EXPAND = 'statement.detail_plan_expand'

function PlanDetail({ query }: IPlanDetailProps) {
const { t } = useTranslation()
const { data, isLoading, error } = useClientRequest((reqConfig) =>
Expand All @@ -48,11 +50,22 @@ function PlanDetail({ query }: IPlanDetailProps) {
reqConfig
)
)
const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
const { state: prevSqlExpanded, toggle: togglePrevSqlExpanded } = useToggle(
false

const [detailExpand, setDetailExpand] = useLocalStorageState(
STMT_DETAIL_PLAN_EXPAND,
{
prev_query: false,
query: false,
plan: false,
}
)
const { state: planExpanded, toggle: togglePlanExpanded } = useToggle(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 }))

let title_key
if (query.allPlans === 1) {
Expand All @@ -62,7 +75,6 @@ function PlanDetail({ query }: IPlanDetailProps) {
} else {
title_key = 'some'
}

return (
<Card
title={t(`statement.pages.detail.desc.plans.title.${title_key}`, {
Expand All @@ -76,20 +88,20 @@ function PlanDetail({ query }: IPlanDetailProps) {
<Descriptions>
<Descriptions.Item
span={2}
multiline={sqlExpanded}
multiline={detailExpand.query}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="statement.fields.query_sample_text" />
<Expand.Link
expanded={sqlExpanded}
onClick={() => toggleSqlExpanded()}
expanded={detailExpand.query}
onClick={toggleQuery}
/>
<CopyLink data={formatSql(data.query_sample_text)} />
</Space>
}
>
<Expand
expanded={sqlExpanded}
expanded={detailExpand.query}
collapsedContent={
<HighlightSQL sql={data.query_sample_text!} compact />
}
Expand All @@ -100,20 +112,20 @@ function PlanDetail({ query }: IPlanDetailProps) {
{data.prev_sample_text ? (
<Descriptions.Item
span={2}
multiline={prevSqlExpanded}
multiline={detailExpand.prev_query}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="statement.fields.prev_sample_text" />
<Expand.Link
expanded={prevSqlExpanded}
onClick={() => togglePrevSqlExpanded()}
expanded={detailExpand.prev_query}
onClick={togglePrevQuery}
/>
<CopyLink data={formatSql(data.prev_sample_text)} />
</Space>
}
>
<Expand
expanded={prevSqlExpanded}
expanded={detailExpand.prev_query}
collapsedContent={
<HighlightSQL sql={data.prev_sample_text!} compact />
}
Expand All @@ -124,19 +136,19 @@ function PlanDetail({ query }: IPlanDetailProps) {
) : null}
<Descriptions.Item
span={2}
multiline={planExpanded}
multiline={detailExpand.plan}
label={
<Space size="middle">
<TextWithInfo.TransKey transKey="statement.fields.plan" />
<Expand.Link
expanded={planExpanded}
onClick={() => togglePlanExpanded()}
expanded={detailExpand.plan}
onClick={togglePlan}
/>
<CopyLink data={data.plan ?? ''} />
</Space>
}
>
<Expand expanded={planExpanded}>
<Expand expanded={detailExpand.plan}>
<Pre noWrap>{data.plan}</Pre>
</Expand>
</Descriptions.Item>
Expand Down
Loading

0 comments on commit da412a3

Please sign in to comment.