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 { AppShell, type PageKey } from './layout/AppShell';
|
||||||
import { Dashboard } from './pages/Dashboard';
|
import { Dashboard } from './pages/Dashboard';
|
||||||
import { History } from './pages/History';
|
import { History } from './pages/History';
|
||||||
@@ -11,6 +13,15 @@ import { Vehicles } from './pages/Vehicles';
|
|||||||
export default function App() {
|
export default function App() {
|
||||||
const [activePage, setActivePage] = useState<PageKey>('dashboard');
|
const [activePage, setActivePage] = useState<PageKey>('dashboard');
|
||||||
const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
|
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 openVehicle = (vin: string) => {
|
||||||
const nextVin = vin.trim();
|
const nextVin = vin.trim();
|
||||||
@@ -32,7 +43,7 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}>
|
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={setActivePage} onVehicleSearch={openVehicle}>
|
||||||
{pages[activePage]}
|
{pages[activePage]}
|
||||||
</AppShell>
|
</AppShell>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -26,11 +26,13 @@ const navItems = [
|
|||||||
|
|
||||||
export function AppShell({
|
export function AppShell({
|
||||||
activePage,
|
activePage,
|
||||||
|
linkIssueCount,
|
||||||
onChange,
|
onChange,
|
||||||
onVehicleSearch,
|
onVehicleSearch,
|
||||||
children
|
children
|
||||||
}: {
|
}: {
|
||||||
activePage: PageKey;
|
activePage: PageKey;
|
||||||
|
linkIssueCount: number | null;
|
||||||
onChange: (page: PageKey) => void;
|
onChange: (page: PageKey) => void;
|
||||||
onVehicleSearch: (keyword: string) => void;
|
onVehicleSearch: (keyword: string) => void;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@@ -76,7 +78,9 @@ export function AppShell({
|
|||||||
</Space>
|
</Space>
|
||||||
<Space spacing={12}>
|
<Space spacing={12}>
|
||||||
<Tag color="blue">生产环境</Tag>
|
<Tag color="blue">生产环境</Tag>
|
||||||
<Button size="small" onClick={() => onChange('quality')}>链路监控</Button>
|
<Button size="small" onClick={() => onChange('quality')}>
|
||||||
|
{linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
|
||||||
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</header>
|
</header>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
Reference in New Issue
Block a user