diff --git a/ui/dashboardApp/layout/main/Sider/index.js b/ui/dashboardApp/layout/main/Sider/index.js
index 544f630ed5..02dc3f36a6 100644
--- a/ui/dashboardApp/layout/main/Sider/index.js
+++ b/ui/dashboardApp/layout/main/Sider/index.js
@@ -71,7 +71,8 @@ function useCurrentLogin() {
export default function Sider({
registry,
- width,
+ fullWidth,
+ defaultCollapsed,
collapsed,
collapsedWidth,
onToggle,
@@ -120,24 +121,25 @@ export default function Sider({
]
const transSider = useSpring({
- width: collapsed ? collapsedWidth : width,
+ width: collapsed ? collapsedWidth : fullWidth,
})
return (
{
}
export default function App({ registry }) {
- const { state: collapsed, toggle: toggleCollapsed } = useToggle()
+ const [collapsed, setCollapsed] = useLocalStorageState(
+ 'layout.sider.collapsed',
+ false
+ )
+ const [defaultCollapsed] = useState(collapsed)
const {
contentLeftOffset,
onAnimationStart,
@@ -50,7 +54,6 @@ export default function App({ registry }) {
} = useContentLeftOffset(collapsed)
const transContentBack = useSpring({
x: collapsed ? collapsedContentOffset : 0,
- from: { x: 0 },
onStart: onAnimationStart,
onFrame: onAnimationFrame,
})
@@ -60,14 +63,19 @@ export default function App({ registry }) {
delay: 100,
})
+ const handleToggle = useCallback(() => {
+ setCollapsed((c) => !c)
+ }, [setCollapsed])
+
return (
toggleCollapsed()}
+ fullWidth={siderWidth}
+ onToggle={handleToggle}
+ defaultCollapsed={defaultCollapsed}
collapsed={collapsed}
collapsedWidth={siderCollapsedWidth}
animationDelay={0}
diff --git a/ui/lib/apps/KeyViz/components/KeyViz.tsx b/ui/lib/apps/KeyViz/components/KeyViz.tsx
index d249ea5c92..51c9b78ff0 100644
--- a/ui/lib/apps/KeyViz/components/KeyViz.tsx
+++ b/ui/lib/apps/KeyViz/components/KeyViz.tsx
@@ -1,13 +1,15 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
import { Button, Drawer } from 'antd'
import { useTranslation } from 'react-i18next'
-import useInterval from '@use-it/interval'
import { Heatmap } from '../heatmap'
import { HeatmapData, HeatmapRange, DataTag } from '../heatmap/types'
-import { fetchHeatmap, fetchServiceStatus } from '../utils'
+import { fetchHeatmap } from '../utils'
import ToolBar from './ToolBar'
import KeyVizSettingForm from './KeyVizSettingForm'
import './KeyViz.less'
+import { useGetSet, useMount, useInterval } from 'react-use'
+import client from '@lib/client'
+import { useBoolean } from '@umijs/hooks'
type CacheEntry = {
metricType: DataTag
@@ -78,125 +80,128 @@ let cache = new HeatmapCache()
const KeyViz = (props) => {
const [chartState, setChartState] = useState()
- const [selection, setSelection] = useState(null)
+ const [getSelection, setSelection] = useGetSet(null)
const [isLoading, setLoading] = useState(true)
- const [autoRefreshSeconds, setAutoRefreshSeconds] = useState(0)
- const autoRefreshSecondsRef = useRef(autoRefreshSeconds)
- const [remainingRefreshSeconds, setRemainingRefreshSeconds] = useState(0)
- const [isOnBrush, setOnBrush] = useState(false)
- const [dateRange, setDateRange] = useState(3600 * 6)
- const [brightLevel, setBrightLevel] = useState(1)
- const [metricType, setMetricType] = useState('written_bytes')
+ const [getAutoRefreshSeconds, setAutoRefreshSeconds] = useGetSet(0)
+ const [getRemainingRefreshSeconds, setRemainingRefreshSeconds] = useGetSet(0)
+ const [getOnBrush, setOnBrush] = useGetSet(false)
+ const [getDateRange, setDateRange] = useGetSet(3600 * 6)
+ const [getBrightLevel, setBrightLevel] = useGetSet(1)
+ const [getMetricType, setMetricType] = useGetSet('written_bytes')
const [serviceEnabled, setServiceEnabled] = useState(false)
- const [showSettings, setShowSettings] = useState(false)
+ const {
+ state: shouldShowSettings,
+ setTrue: openSettings,
+ setFalse: closeSettings,
+ } = useBoolean(false)
const { t } = useTranslation()
- const onFetchServiceStatus = () => {
+ const updateServiceStatus = useCallback(async function () {
setLoading(true)
- fetchServiceStatus().then(
- (status) => {
- if (!status) {
- setAutoRefreshSeconds(0)
- }
- setServiceEnabled(status)
- setLoading(false)
- },
- () => {
- setLoading(false)
+ try {
+ const config = await client.getInstance().keyvisualConfigGet()
+ const enabled = config.data.auto_collection_enabled === true
+ if (!enabled) {
+ setAutoRefreshSeconds(0)
}
- )
- }
+ setServiceEnabled(enabled)
+ if (enabled) {
+ updateHeatmap()
+ }
+ } catch (e) {}
+ setLoading(false)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ useMount(() => {
+ updateServiceStatus()
+ })
- const onFetchHeatmap = useCallback(() => {
- if (autoRefreshSecondsRef.current > 0) {
- setRemainingRefreshSeconds(autoRefreshSecondsRef.current)
+ const updateHeatmap = useCallback(async () => {
+ if (getAutoRefreshSeconds() > 0) {
+ setRemainingRefreshSeconds(getAutoRefreshSeconds())
}
setLoading(true)
setOnBrush(false)
- cache.fetch(selection || dateRange, metricType).then(
- (data) => {
- setChartState({ heatmapData: data!, metricType: metricType })
- setLoading(false)
- },
- () => {
- setLoading(false)
- }
- )
- }, [selection, dateRange, metricType])
+ try {
+ const metricType = getMetricType()
+ const data = await cache.fetch(
+ getSelection() || getDateRange(),
+ metricType
+ )
+ setChartState({ heatmapData: data!, metricType })
+ } catch (e) {}
+ setLoading(false)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- const onChangeBrightLevel = (val) => {
+ const onChangeBrightLevel = useCallback((val) => {
if (!_chart) return
setBrightLevel(val)
_chart.brightness(val)
- }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- const onChangeDateRange = (v: number) => {
+ const onChangeDateRange = useCallback((v: number) => {
setDateRange(v)
setSelection(null)
- }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- const onResetZoom = () => {
+ const onResetZoom = useCallback(() => {
setSelection(null)
- }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- const onToggleBrush = () => {
+ const onToggleBrush = useCallback(() => {
+ const newOnBrush = !getOnBrush()
setAutoRefreshSeconds(0)
- setOnBrush(!isOnBrush)
- _chart.brush(!isOnBrush)
- }
+ setOnBrush(newOnBrush)
+ _chart.brush(newOnBrush)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
const onBrush = useCallback((selection: HeatmapRange) => {
setOnBrush(false)
setAutoRefreshSeconds(0)
setSelection(selection)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const onZoom = useCallback(() => {
setAutoRefreshSeconds(0)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const onChartInit = useCallback((chart) => {
_chart = chart
setLoading(false)
- setBrightLevel((l) => {
- _chart.brightness(l)
- return l
- })
+ _chart.brightness(getBrightLevel())
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
- autoRefreshSecondsRef.current = autoRefreshSeconds
- }, [autoRefreshSeconds])
-
- useEffect(onFetchServiceStatus, [])
-
- useEffect(() => {
- if (serviceEnabled) {
- onFetchHeatmap()
+ if (getRemainingRefreshSeconds() > getAutoRefreshSeconds()) {
+ setRemainingRefreshSeconds(getAutoRefreshSeconds())
}
- }, [serviceEnabled, onFetchHeatmap])
-
- useEffect(() => {
- setRemainingRefreshSeconds((r) => {
- if (r > autoRefreshSeconds) {
- return autoRefreshSeconds
- } else {
- return r
- }
- })
-
- if (autoRefreshSeconds > 0) {
+ if (getAutoRefreshSeconds() > 0) {
onResetZoom()
setOnBrush(false)
}
- }, [autoRefreshSeconds])
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [getAutoRefreshSeconds()])
+
+ useEffect(() => {
+ updateHeatmap()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [getSelection(), getDateRange(), getMetricType()])
useInterval(() => {
- if (autoRefreshSeconds === 0) {
+ if (getAutoRefreshSeconds() === 0) {
return
}
- if (remainingRefreshSeconds === 0) {
- onFetchHeatmap()
+ if (getRemainingRefreshSeconds() === 0) {
+ updateHeatmap()
} else {
setRemainingRefreshSeconds((c) => c - 1)
}
@@ -219,7 +224,7 @@ const KeyViz = (props) => {
{t('keyviz.settings.disabled_desc_line_1')}
{t('keyviz.settings.disabled_desc_line_2')}