Skip to content

Commit

Permalink
ui: memorize expand/collapse full text in detail pages (#775)
Browse files Browse the repository at this point in the history
  • Loading branch information
@unbyte
unbyte authored Oct 22, 2020
1 parent b7e5890 commit c778d04
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 55 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
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
14 changes: 10 additions & 4 deletions ui/lib/apps/Statement/pages/Detail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
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, { StatementModel } from '@lib/client'
import {
AnimatedSkeleton,
CardTable,
DateTime,
Descriptions,
ErrorBar,
Expand,
Head,
HighlightSQL,
TextWithInfo,
ErrorBar,
} from '@lib/components'
import CopyLink from '@lib/components/CopyLink'
import formatSql from '@lib/utils/formatSql'
Expand All @@ -34,6 +34,8 @@ export interface IPageQuery {
endTime?: number
}

const STMT_DETAIL_EXPAND = 'statement.detail_expand'

function DetailPage() {
const query = DetailPage.parseQuery(useLocation().search)
const { data: plans, isLoading, error } = useClientRequest((reqConfig) =>
Expand All @@ -60,7 +62,11 @@ function DetailPage() {
})
)

const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
const [sqlExpanded, setSqlExpanded] = useLocalStorageState(
STMT_DETAIL_EXPAND,
false
)
const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev)

useEffect(() => {
if (plans && plans.length > 0) {
Expand Down Expand Up @@ -91,7 +97,7 @@ function DetailPage() {
<TextWithInfo.TransKey transKey="statement.fields.digest_text" />
<Expand.Link
expanded={sqlExpanded}
onClick={() => toggleSqlExpanded()}
onClick={toggleSqlExpanded}
/>
<CopyLink data={formatSql(plans[0].digest_text!)} />
</Space>
Expand Down

0 comments on commit c778d04

Please sign in to comment.