+) {
+ const { t } = useTranslation()
+
+ const {
+ data: dataTiDB,
+ isLoading: loadingTiDB,
+ } = useClientRequest((cancelToken) =>
+ client.getInstance().getTiDBTopology({ cancelToken })
+ )
+ const {
+ data: dataStores,
+ isLoading: loadingStores,
+ } = useClientRequest((cancelToken) =>
+ client.getInstance().getStoreTopology({ cancelToken })
+ )
+ const {
+ data: dataPD,
+ isLoading: loadingPD,
+ } = useClientRequest((cancelToken) =>
+ client.getInstance().getPDTopology({ cancelToken })
+ )
+
+ const columns: IColumn[] = useMemo(
+ () => [
+ {
+ name: t('component.instanceSelect.columns.key'),
+ key: 'key',
+ minWidth: 160,
+ maxWidth: 160,
+ onRender: (node: IInstanceTableItem) => {
+ return (
+
+
+ {node.key}
+
+
+ )
+ },
+ },
+ {
+ name: t('component.instanceSelect.columns.status'),
+ key: 'status',
+ minWidth: 100,
+ maxWidth: 100,
+ onRender: (node: IInstanceTableItem) => {
+ return (
+
+
+
+ )
+ },
+ },
+ ],
+ [t]
+ )
+
+ const [tableItems, tableGroups] = useMemo(() => {
+ if (loadingTiDB || loadingStores || loadingPD) {
+ return [[], []]
+ }
+ return buildInstanceTable({
+ dataPD,
+ dataTiDB,
+ dataTiKV: dataStores?.tikv,
+ dataTiFlash: dataStores?.tiflash,
+ includeTiFlash: enableTiFlash,
+ })
+ }, [
+ enableTiFlash,
+ dataTiDB,
+ dataStores,
+ dataPD,
+ loadingTiDB,
+ loadingStores,
+ loadingPD,
+ ])
+
+ const onChangePersist = usePersistFn((v: string[]) => {
+ onChange?.(v)
+ })
+
+ const selection = useRef(
+ new Selection({
+ onSelectionChanged: () => {
+ const s = selection.current.getSelection() as IInstanceTableItem[]
+ const keys = s.map((v) => v.key)
+ onChangePersist([...keys])
+ },
+ })
+ )
+
+ useShallowCompareEffect(() => {
+ const sel = selection.current
+ if (value != null) {
+ const s = sel.getSelection() as IInstanceTableItem[]
+ if (
+ s.length === value.length &&
+ s.every((item, index) => value?.[index] === item.key)
+ ) {
+ return
+ }
+ }
+ // Update selection when value is changed
+ sel.setChangeEvents(false)
+ sel.setAllSelected(false)
+ if (value && value.length > 0) {
+ for (const key of value) {
+ sel.setKeySelected(key, true, false)
+ }
+ }
+ sel.setChangeEvents(true)
+ }, [value])
+
+ const dataHasLoaded = useRef(false)
+
+ useEffect(() => {
+ // When data is loaded for the first time, we need to:
+ // - Select all if `defaultSelectAll` is set and value is not given.
+ // - Update selection according to value
+ if (dataHasLoaded.current) {
+ return
+ }
+ if (tableItems.length === 0) {
+ return
+ }
+ const sel = selection.current
+ sel.setChangeEvents(false)
+ sel.setItems(tableItems)
+ if (value && value.length > 0) {
+ sel.setAllSelected(false)
+ for (const key of value) {
+ sel.setKeySelected(key, true, false)
+ }
+ } else if (defaultSelectAll) {
+ sel.setAllSelected(true)
+ }
+ sel.setChangeEvents(true)
+ dataHasLoaded.current = true
+ // [defaultSelectAll, value] is not needed
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [tableItems])
+
+ const getInstanceByKeys = usePersistFn((keys: string[]) => {
+ const keyToItemMap = {}
+ for (const item of tableItems) {
+ keyToItemMap[item.key] = item
+ }
+ return keys.map((key) => keyToItemMap[key])
+ })
+
+ const getInstanceByKey = usePersistFn((key: string) => {
+ return getInstanceByKeys([key])[0]
+ })
+
+ React.useImperativeHandle(ref, () => ({
+ getInstanceByKey,
+ getInstanceByKeys,
+ }))
+
+ const renderValue = useCallback(
+ (selectedKeys) => {
+ if (
+ tableItems.length === 0 ||
+ !selectedKeys ||
+ selectedKeys.length === 0
+ ) {
+ return null
+ }
+ return
+ },
+ [tableItems]
+ )
+
+ const renderDropdown = useCallback(
+ () => (
+
+ ),
+ [columns, tableItems, tableGroups]
+ )
+
+ return (
+
+ )
+}
+
+export default React.forwardRef(InstanceSelect)
diff --git a/ui/lib/components/InstanceStatusBadge/index.tsx b/ui/lib/components/InstanceStatusBadge/index.tsx
new file mode 100644
index 0000000000..3af04b4587
--- /dev/null
+++ b/ui/lib/components/InstanceStatusBadge/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { InstanceStatus } from '@lib/utils/instanceTable'
+import { Badge } from 'antd'
+import { addTranslationResource } from '@lib/utils/i18n'
+
+const translations = {
+ en: {
+ status: {
+ up: 'Up',
+ down: 'Down',
+ tombstone: 'Tombstone',
+ offline: 'Leaving',
+ unknown: 'Unknown',
+ unreachable: 'Unreachable',
+ },
+ },
+ 'zh-CN': {
+ status: {
+ up: '在线',
+ down: '离线',
+ tombstone: '已缩容下线',
+ offline: '下线中',
+ unknown: '未知',
+ unreachable: '无法访问',
+ },
+ },
+}
+
+for (const key in translations) {
+ addTranslationResource(key, {
+ component: {
+ instanceStatusBadge: translations[key],
+ },
+ })
+}
+
+export interface IInstanceStatusBadgeProps {
+ status?: number
+}
+
+function InstanceStatusBadge({ status }: IInstanceStatusBadgeProps) {
+ const { t } = useTranslation()
+ switch (status) {
+ case InstanceStatus.Down:
+ return (
+
+ )
+ case InstanceStatus.Unreachable:
+ return (
+
+ )
+ case InstanceStatus.Up:
+ return (
+
+ )
+ case InstanceStatus.Tombstone:
+ return (
+
+ )
+ case InstanceStatus.Offline:
+ return (
+
+ )
+ default:
+ return (
+
+ )
+ }
+}
+
+export default React.memo(InstanceStatusBadge)
diff --git a/ui/lib/components/TimeRangeSelector/index.tsx b/ui/lib/components/TimeRangeSelector/index.tsx
index 47d5260812..35f3a68aa1 100644
--- a/ui/lib/components/TimeRangeSelector/index.tsx
+++ b/ui/lib/components/TimeRangeSelector/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useCallback, useEffect } from 'react'
import { Dropdown, Button, DatePicker } from 'antd'
import { ClockCircleOutlined, DownOutlined } from '@ant-design/icons'
import { getValueFormat } from '@baurine/grafana-value-formats'
@@ -12,14 +12,28 @@ import styles from './index.module.less'
const { RangePicker } = DatePicker
const RECENT_SECONDS = [
+ 15 * 60,
30 * 60,
60 * 60,
- 3 * 60 * 60,
+
+ 2 * 60 * 60,
6 * 60 * 60,
12 * 60 * 60,
+
24 * 60 * 60,
+ 2 * 24 * 60 * 60,
+ 3 * 24 * 60 * 60,
+
+ 7 * 24 * 60 * 60,
+ 14 * 24 * 60 * 60,
+ 28 * 24 * 60 * 60,
]
+const DEFAULT_TIME_RANGE: TimeRange = {
+ type: 'recent',
+ value: 30 * 60,
+}
+
interface RecentSecTime {
type: 'recent'
value: number // unit: seconds
@@ -32,62 +46,65 @@ interface RangeTime {
export type TimeRange = RecentSecTime | RangeTime
-export const DEF_TIME_RANGE: TimeRange = {
- type: 'recent',
- value: 30 * 60,
-}
-
-export function calcTimeRange(timeRange: TimeRange): [number, number] {
- if (timeRange.type === 'absolute') {
- return timeRange.value
+export function calcTimeRange(timeRange?: TimeRange): [number, number] {
+ let t2 = timeRange ?? DEFAULT_TIME_RANGE
+ if (t2.type === 'absolute') {
+ return t2.value
} else {
const now = dayjs().unix()
- return [now - timeRange.value, now]
+ return [now - t2.value, now]
}
}
export interface ITimeRangeSelectorProps {
- value: TimeRange
- onChange: (val: TimeRange) => void
+ value?: TimeRange
+ onChange?: (val: TimeRange) => void
}
-function TimeRangeSelector({
- value: curTimeRange,
- onChange,
-}: ITimeRangeSelectorProps) {
+function TimeRangeSelector({ value, onChange }: ITimeRangeSelectorProps) {
const { t } = useTranslation()
const [dropdownVisible, setDropdownVisible] = useState(false)
+ useEffect(() => {
+ if (!value) {
+ onChange?.(DEFAULT_TIME_RANGE)
+ }
+ // ignore [onChange]
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [value])
+
const rangePickerValue = useMemo(() => {
- return curTimeRange.type === 'absolute'
- ? ([
- moment(curTimeRange.value[0] * 1000),
- moment(curTimeRange.value[1] * 1000),
- ] as [Moment, Moment])
- : null
- }, [curTimeRange])
-
- function handleRecentChange(seconds: number) {
- onChange({
- type: 'recent',
- value: seconds,
- })
- setDropdownVisible(false)
- }
+ if (value?.type !== 'absolute') {
+ return null
+ }
+ return value.value.map((sec) => moment(sec * 1000)) as [Moment, Moment]
+ }, [value])
+
+ const handleRecentChange = useCallback(
+ (seconds: number) => {
+ onChange?.({
+ type: 'recent',
+ value: seconds,
+ })
+ setDropdownVisible(false)
+ },
+ [onChange]
+ )
- function handleRangePickerChange(values) {
- if (values === null) {
- if (curTimeRange.type === 'absolute') {
- handleRecentChange(30 * 60)
+ const handleRangePickerChange = useCallback(
+ (values) => {
+ if (values === null) {
+ onChange?.(DEFAULT_TIME_RANGE)
+ } else {
+ onChange?.({
+ type: 'absolute',
+ value: values.map((v) => v.unix()),
+ })
}
- } else {
- onChange({
- type: 'absolute',
- value: [values[0].unix(), values[1].unix()],
- })
setDropdownVisible(false)
- }
- }
+ },
+ [onChange]
+ )
const dropdownContent = (
@@ -104,8 +121,7 @@ function TimeRangeSelector({
key={seconds}
className={cx(styles.time_range_item, {
[styles.time_range_item_active]:
- curTimeRange.type === 'recent' &&
- curTimeRange.value === seconds,
+ value && value.type === 'recent' && value.value === seconds,
})}
onClick={() => handleRecentChange(seconds)}
>
@@ -141,17 +157,20 @@ function TimeRangeSelector({
onVisibleChange={setDropdownVisible}
>
}>
- {curTimeRange.type === 'recent' ? (
+ {value && value.type === 'recent' && (
{t('statement.pages.overview.toolbar.time_range_selector.recent')}{' '}
- {getValueFormat('s')(curTimeRange.value, 0)}
+ {getValueFormat('s')(value.value, 0)}
- ) : (
+ )}
+ {value && value.type === 'absolute' && (
- {dayjs.unix(curTimeRange.value[0]).format('MM-DD HH:mm:ss')} ~{' '}
- {dayjs.unix(curTimeRange.value[1]).format('MM-DD HH:mm:ss')}
+ {value.value
+ .map((v) => dayjs.unix(v).format('MM-DD HH:mm:ss'))
+ .join(' ~ ')}
)}
+ {!value && 'Select Time'}
diff --git a/ui/lib/components/index.ts b/ui/lib/components/index.ts
index 6b2ca5776a..39b70da7a6 100644
--- a/ui/lib/components/index.ts
+++ b/ui/lib/components/index.ts
@@ -6,8 +6,6 @@ export * from './Card'
export { default as Card } from './Card'
export * from './CardTabs'
export { default as CardTabs } from './CardTabs'
-export * from './CardTable'
-export { default as CardTable } from './CardTable'
export * from './CardTableV2'
export { default as CardTableV2 } from './CardTableV2'
export * from './Bar'
@@ -38,6 +36,12 @@ export * from './TimeRangeSelector'
export { default as TimeRangeSelector } from './TimeRangeSelector'
export * from './AnimatedSkeleton'
export { default as AnimatedSkeleton } from './AnimatedSkeleton'
+export * from './InstanceStatusBadge'
+export { default as InstanceStatusBadge } from './InstanceStatusBadge'
+export * from './BaseSelect'
+export { default as BaseSelect } from './BaseSelect'
+export * from './InstanceSelect'
+export { default as InstanceSelect } from './InstanceSelect'
export * from './ShortValueWithTooltip'
export { default as ShortValueWithTooltip } from './ShortValueWithTooltip'
diff --git a/ui/lib/utils/form.ts b/ui/lib/utils/form.ts
deleted file mode 100644
index 059704099c..0000000000
--- a/ui/lib/utils/form.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const hiddenProps = {
- style: {
- display: 'none',
- },
-}
-
-const showProps = {}
-
-export function setHidden(hidden: boolean) {
- return hidden ? hiddenProps : showProps
-}
diff --git a/ui/lib/utils/instanceTable.ts b/ui/lib/utils/instanceTable.ts
new file mode 100644
index 0000000000..bffebadc14
--- /dev/null
+++ b/ui/lib/utils/instanceTable.ts
@@ -0,0 +1,94 @@
+import {
+ TopologyPDInfo,
+ TopologyTiDBInfo,
+ TopologyStoreInfo,
+} from '@lib/client'
+import { IGroup } from 'office-ui-fabric-react/lib/DetailsList'
+
+export type InstanceKind = 'pd' | 'tidb' | 'tikv' | 'tiflash'
+
+export const InstanceStatus = {
+ Unreachable: 0,
+ Up: 1,
+ Tombstone: 2,
+ Offline: 3,
+ Down: 4,
+}
+
+export const InstanceKindName: { [key in InstanceKind]: string } = {
+ pd: 'PD',
+ tidb: 'TiDB',
+ tikv: 'TiKV',
+ tiflash: 'TiFlash',
+}
+
+export const InstanceKinds = Object.keys(InstanceKindName) as InstanceKind[]
+
+export interface IInstanceTableItem
+ extends TopologyPDInfo,
+ TopologyTiDBInfo,
+ TopologyStoreInfo {
+ key: string
+ instanceKind: InstanceKind
+}
+
+export interface IBuildInstanceTableProps {
+ dataPD?: TopologyPDInfo[]
+ dataTiDB?: TopologyTiDBInfo[]
+ dataTiKV?: TopologyStoreInfo[]
+ dataTiFlash?: TopologyStoreInfo[]
+ includeTiFlash?: boolean
+ filterHost?: string
+}
+
+export function buildInstanceTable({
+ dataPD,
+ dataTiDB,
+ dataTiKV,
+ dataTiFlash,
+ includeTiFlash,
+ filterHost,
+}: IBuildInstanceTableProps): [IInstanceTableItem[], IGroup[]] {
+ const tableData: IInstanceTableItem[] = []
+ const groupData: IGroup[] = []
+ let startIndex = 0
+ const kinds: [
+ InstanceKind,
+ TopologyPDInfo[] | TopologyTiDBInfo[] | TopologyStoreInfo[] | undefined
+ ][] = [
+ ['pd', dataPD],
+ ['tidb', dataTiDB],
+ ['tikv', dataTiKV],
+ ]
+ if (includeTiFlash) {
+ kinds.push(['tiflash', dataTiFlash])
+ }
+ for (const item of kinds) {
+ const [ik, instances] = item
+ if (!instances || instances.length === 0) {
+ continue
+ }
+ groupData.push({
+ key: ik,
+ name: InstanceKindName[ik],
+ startIndex: startIndex,
+ count: instances.length,
+ level: 0,
+ })
+ startIndex += instances.length
+ instances.forEach((instance) => {
+ const key = `${instance.ip}:${instance.port}`
+ if (filterHost != null && filterHost.length > 0) {
+ if (key.indexOf(filterHost) === -1) {
+ return
+ }
+ }
+ tableData.push({
+ key: key,
+ instanceKind: ik,
+ ...instance,
+ })
+ })
+ }
+ return [tableData, groupData]
+}
diff --git a/ui/lib/utils/useClientRequest.ts b/ui/lib/utils/useClientRequest.ts
index b625167d6d..26bc6aca7e 100644
--- a/ui/lib/utils/useClientRequest.ts
+++ b/ui/lib/utils/useClientRequest.ts
@@ -1,4 +1,4 @@
-import { useMount, useUnmount } from '@umijs/hooks'
+import { useMount, useUnmount, usePersistFn } from '@umijs/hooks'
import { useState, useRef, useEffect } from 'react'
import { CancelToken, AxiosPromise, CancelTokenSource } from 'axios'
import axios from 'axios'
@@ -34,7 +34,7 @@ export function useClientRequest(
const cancelTokenSource = useRef(null)
const mounted = useRef(false)
- const sendRequest = async () => {
+ const sendRequest = usePersistFn(async () => {
if (!mounted.current) {
return
}
@@ -72,7 +72,7 @@ export function useClientRequest(
cancelTokenSource.current = null
afterRequest && afterRequest()
- }
+ })
useMount(() => {
mounted.current = true
@@ -138,7 +138,7 @@ export function useBatchClientRequest(
}
}
- const sendRequest = async () => {
+ const sendRequest = usePersistFn(async () => {
if (!mounted.current) {
return
}
@@ -167,7 +167,7 @@ export function useBatchClientRequest(
cancelTokenSource.current = null
afterRequest && afterRequest()
- }
+ })
useMount(() => {
mounted.current = true