schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve dashboard monitor health bar size

Browse Source
This commit is contained in:
moonrailgun 2023-11-15 22:15:06 +08:00
parent 8fee03999d
commit f9e8a1df0b
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/client/components/dashboard/items/MonitorHealthBarItem.tsx
View File

@ -4,6 +4,13 @@ import { MonitorHealthBar } from '../../monitor/MonitorHealthBar';
export const MonitorHealthBarItem: React.FC<{ export const MonitorHealthBarItem: React.FC<{
monitorId: string; monitorId: string;
}> = React.memo((props) => { }> = React.memo((props) => {
return <MonitorHealthBar monitorId={props.monitorId} />; return (
<MonitorHealthBar
monitorId={props.monitorId}
count={40}
size="large"
showCurrentStatus={true}
/>
);
}); });
MonitorHealthBarItem.displayName = 'MonitorHealthBarItem'; MonitorHealthBarItem.displayName = 'MonitorHealthBarItem';

2
src/client/components/dashboard/items/index.tsx
View File

@ -41,7 +41,7 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
<Card <Card
className="h-full w-full overflow-auto" className="h-full w-full overflow-auto"
title={title} title={title}
headStyle={{ padding: 10 }} headStyle={{ padding: 10, minHeight: 40 }}
bodyStyle={{ padding: 10 }} bodyStyle={{ padding: 10 }}
extra={ extra={
isEditMode && ( isEditMode && (

2
src/client/store/dashboard.ts
View File

@ -75,7 +75,7 @@ export const useDashboardStore = create<DashboardState>((set, get) => ({
export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = { export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 }, websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 },
websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 }, websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 },
monitorHealthBar: { x: Infinity, y: Infinity, w: 1, h: 2 }, monitorHealthBar: { x: Infinity, y: Infinity, w: 2, h: 2 },
monitorStatus: { x: Infinity, y: Infinity, w: 4, h: 2 }, monitorStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
monitorChart: { x: Infinity, y: Infinity, w: 4, h: 2 }, monitorChart: { x: Infinity, y: Infinity, w: 4, h: 2 },
monitorEvent: { x: Infinity, y: Infinity, w: 4, h: 2 }, monitorEvent: { x: Infinity, y: Infinity, w: 4, h: 2 },