feat(platform): show link issue count in topbar
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Toast } from '@douyinfe/semi-ui';
|
||||
import { api } from './api/client';
|
||||
import { AppShell, type PageKey } from './layout/AppShell';
|
||||
import { Dashboard } from './pages/Dashboard';
|
||||
import { History } from './pages/History';
|
||||
@@ -11,6 +13,15 @@ import { Vehicles } from './pages/Vehicles';
|
||||
export default function App() {
|
||||
const [activePage, setActivePage] = useState<PageKey>('dashboard');
|
||||
const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
|
||||
const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.opsHealth()
|
||||
.then((health) => {
|
||||
setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
|
||||
})
|
||||
.catch((error: Error) => Toast.error(error.message));
|
||||
}, []);
|
||||
|
||||
const openVehicle = (vin: string) => {
|
||||
const nextVin = vin.trim();
|
||||
@@ -32,7 +43,7 @@ export default function App() {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}>
|
||||
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={setActivePage} onVehicleSearch={openVehicle}>
|
||||
{pages[activePage]}
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
@@ -26,11 +26,13 @@ const navItems = [
|
||||
|
||||
export function AppShell({
|
||||
activePage,
|
||||
linkIssueCount,
|
||||
onChange,
|
||||
onVehicleSearch,
|
||||
children
|
||||
}: {
|
||||
activePage: PageKey;
|
||||
linkIssueCount: number | null;
|
||||
onChange: (page: PageKey) => void;
|
||||
onVehicleSearch: (keyword: string) => void;
|
||||
children: ReactNode;
|
||||
@@ -76,7 +78,9 @@ export function AppShell({
|
||||
</Space>
|
||||
<Space spacing={12}>
|
||||
<Tag color="blue">生产环境</Tag>
|
||||
<Button size="small" onClick={() => onChange('quality')}>链路监控</Button>
|
||||
<Button size="small" onClick={() => onChange('quality')}>
|
||||
{linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
|
||||
</Button>
|
||||
</Space>
|
||||
</header>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user