third/APIPark
1
0
Fork 0
mirror of https://github.com/APIParkLab/APIPark.git synced 2026-06-04 10:13:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature/1.8-Improve system observability

Browse Source
This commit is contained in:
ningyv
2025-05-06 14:40:32 +08:00
parent 131a1fae59
commit 83da8df554
5 changed files with 78 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx
+4
View File
@@ -112,6 +112,10 @@ const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
return current && current.valueOf() > dayjs().startOf('day').valueOf()
}
useEffect(() => {
setTimeButton(initialTimeButton || '')
}, [initialTimeButton])
return (
<div className={`flex flex-nowrap items-center ${customClassNames} mr-btnybase`}>
{!hideTitle && <label className={`whitespace-nowrap `}>{$t('时间')}：</label>}
frontend/packages/dashboard/src/component/MonitorApiPage.tsx
+20 -17
View File
@@ -62,6 +62,17 @@ export default function MonitorApiPage(props: MonitorApiPageProps) {
getProjectList()
}, [])
/**
* 重置时间范围
*/
let resetTimeRange = () => {}
/**
* 绑定时间范围组件
* @param instance
*/
const bindRef = (instance: any) => {
resetTimeRange = instance.reset
}
const getApiList = (projectIds?: string[]) => {
return fetchData<{ apis: EntityItem[] }>('simple/service/apis', {
method: 'POST',
@@ -146,6 +157,7 @@ export default function MonitorApiPage(props: MonitorApiPageProps) {
}
const clearSearch = () => {
resetTimeRange()
setTimeButton('hour')
setDatePickerValue(null)
setQueryData(undefined)
@@ -186,11 +198,17 @@ export default function MonitorApiPage(props: MonitorApiPageProps) {
setDrawerOpen(true)
}
useEffect(() => {
setQueryBtnLoading(true)
getApiTableList()
}, [queryData])
return (
<div className="overflow-hidden h-full pr-PAGE_INSIDE_X">
<ScrollableSection>
<div className="pl-btnbase pr-btnrbase pb-btnbase content-before">
<TimeRangeSelector
bindRef={bindRef}
labelSize="small"
initialTimeButton={timeButton}
onTimeButtonChange={setTimeButton}
@@ -235,12 +253,8 @@ export default function MonitorApiPage(props: MonitorApiPageProps) {
<div className="w-[346px] inline-block">
{/* <SearchInputGroup eoSingle={false} eoInputVal={queryData.path} eoClick={() => setQueryData({ ...queryData, path: '' })} /> */}
<Input
value={queryData?.path}
onChange={(e) =>
debounce((e) => {
setQueryData((prevData) => ({ ...(prevData || {}), path: e.target.value }))
}, 100)(e)
}
value={queryData?.path || ''}
onChange={(e) => setQueryData((prevData) => ({ ...(prevData || {}), path: e.target.value }))}
allowClear
placeholder={$t('请输入请求路径进行搜索')}
prefix={<SearchOutlined className="cursor-pointer" />}
@@ -249,17 +263,6 @@ export default function MonitorApiPage(props: MonitorApiPageProps) {
<Button className="ml-btnybase" onClick={clearSearch}>
{$t('重置')}
</Button>
<Button
type="primary"
loading={queryBtnLoading}
className="ml-btnybase"
onClick={() => {
setQueryBtnLoading(true)
getApiTableList()
}}
>
{$t('查询')}
</Button>
<Button className="ml-btnybase" loading={exportLoading} onClick={exportData}>
{$t('导出')}
</Button>
frontend/packages/dashboard/src/component/MonitorAppPage.tsx
+18 -12
View File
@@ -58,7 +58,17 @@ export default function MonitorAppPage(props: MonitorAppPageProps) {
getMonitorData()
getAppList()
}, [])
/**
* 重置时间范围
*/
let resetTimeRange = () => {}
/**
* 绑定时间范围组件
* @param instance
*/
const bindRef = (instance: any) => {
resetTimeRange = instance.reset
}
const getMonitorData = () => {
let query = queryData
if (!queryData || queryData.start === undefined) {
@@ -86,6 +96,7 @@ export default function MonitorAppPage(props: MonitorAppPageProps) {
}
const clearSearch = () => {
resetTimeRange()
setTimeButton('hour')
setDatePickerValue(null)
setQueryData({ type: 'subscriber' })
@@ -163,10 +174,16 @@ export default function MonitorAppPage(props: MonitorAppPageProps) {
setDrawerOpen(true)
}
useEffect(() => {
setQueryBtnLoading(true)
getAppTableList()
}, [queryData])
return (
<div className="h-full overflow-hidden pr-PAGE_INSIDE_X">
<div className="pl-btnbase pr-btnrbase pb-btnybase">
<TimeRangeSelector
bindRef={bindRef}
initialTimeButton={timeButton}
onTimeButtonChange={setTimeButton}
initialDatePickerValue={datePickerValue}
@@ -194,17 +211,6 @@ export default function MonitorAppPage(props: MonitorAppPageProps) {
<Button className="ml-btnybase" onClick={clearSearch}>
{$t('重置')}
</Button>
<Button
type="primary"
loading={queryBtnLoading}
className="ml-btnybase"
onClick={() => {
setQueryBtnLoading(true)
getAppTableList()
}}
>
{$t('查询')}
</Button>
<Button className="ml-btnybase" loading={exportLoading} onClick={exportData}>
{$t('导出')}
</Button>
frontend/packages/dashboard/src/component/MonitorDetailPage.tsx
+18 -11
View File
@@ -78,7 +78,17 @@ export default function MonitorDetailPage(props: MonitorDetailPageProps) {
const monitorTableRef = useRef<MonitorTableHandler>(null)
const [modalTitle, setModalTitle] = useState<string>($t('调用趋势'))
const [queryBtnLoading, setQueryBtnLoading] = useState<boolean>(false)
/**
* 重置时间范围
*/
let resetTimeRange = () => {}
/**
* 绑定时间范围组件
* @param instance
*/
const bindRef = (instance: any) => {
resetTimeRange = instance.reset
}
useEffect(() => {
// 初始化数据
getMonitorData()
@@ -144,6 +154,7 @@ export default function MonitorDetailPage(props: MonitorDetailPageProps) {
}
const clearSearch = () => {
resetTimeRange()
setTimeButton('hour')
setDatePickerValue(null)
setQueryData(null)
@@ -178,11 +189,17 @@ export default function MonitorDetailPage(props: MonitorDetailPageProps) {
setQueryData((pre) => ({ ...pre, ...timeRange }) as SearchBody)
}
useEffect(() => {
setQueryBtnLoading(true)
getMonitorData()
}, [queryData])
return (
<div className="pb-[20px] h-full box-border flex flex-col">
<div className="pl-btnbase pr-btnrbase pb-btnybase sticky top-[0] bg-[#fff] z-[10] shadow-SCROLL_TOP ">
<div className="flex flex-nowrap items-center mr-btnybase">
<TimeRangeSelector
bindRef={bindRef}
initialTimeButton={timeButton}
initialDatePickerValue={datePickerValue}
onTimeButtonChange={setTimeButton}
@@ -192,16 +209,6 @@ export default function MonitorDetailPage(props: MonitorDetailPageProps) {
<Button className="ml-btnybase mt-btnybase" onClick={clearSearch}>
{$t('重置')}
</Button>
<Button
className="ant-btn-primary ml-btnybase mt-btnybase"
loading={queryBtnLoading}
onClick={() => {
setQueryBtnLoading(true)
getMonitorData()
}}
>
{$t('查询')}
</Button>
</div>
</div>
<div className={`flex overflow-y-hidden flex-col flex-1`}>
frontend/packages/dashboard/src/component/MonitorSubPage.tsx
+18 -12
View File
@@ -63,7 +63,17 @@ export default function MonitorSubPage(props: MonitorSubPageProps) {
getMonitorData()
getProjectList()
}, [])
/**
* 重置时间范围
*/
let resetTimeRange = () => {}
/**
* 绑定时间范围组件
* @param instance
*/
const bindRef = (instance: any) => {
resetTimeRange = instance.reset
}
const getMonitorData = () => {
let query = queryData
if (!queryData || queryData.start === undefined) {
@@ -91,6 +101,7 @@ export default function MonitorSubPage(props: MonitorSubPageProps) {
}
const clearSearch = () => {
resetTimeRange()
setTimeButton('hour')
setDatePickerValue(null)
setQueryData({ type: 'provider' })
@@ -168,10 +179,16 @@ export default function MonitorSubPage(props: MonitorSubPageProps) {
setDrawerOpen(true)
}
useEffect(() => {
setQueryBtnLoading(true)
getAppTableList()
}, [queryData])
return (
<div className="overflow-hidden h-full pr-PAGE_INSIDE_X">
<div className="pl-btnbase pr-btnrbase pb-btnybase">
<TimeRangeSelector
bindRef={bindRef}
initialTimeButton={timeButton}
onTimeButtonChange={setTimeButton}
initialDatePickerValue={datePickerValue}
@@ -198,17 +215,6 @@ export default function MonitorSubPage(props: MonitorSubPageProps) {
<Button className="ml-btnybase" onClick={clearSearch}>
{$t('重置')}
</Button>
<Button
type="primary"
loading={queryBtnLoading}
className="ml-btnybase"
onClick={() => {
setQueryBtnLoading(true)
getAppTableList()
}}
>
{$t('查询')}
</Button>
<Button className="ml-btnybase" loading={exportLoading} onClick={exportData}>
{$t('导出')}
</Button>