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

feat: add more dashboard item

Browse Source
This commit is contained in:
moonrailgun 2023-11-16 00:05:48 +08:00
parent 81e9eea565
commit c9f9d68348
6 changed files with 105 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/dashboard/AddButton.tsx
View File

@ -40,10 +40,14 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
},
},
{
key: `website#${website.id}#event`,
key: `website#${website.id}#events`,
label: 'Events',
onClick: () => {
addItem('websiteEvent', website.id, `${website.name}'s Event`);
addItem(
'websiteEvents',
website.id,
`${website.name}'s Events`
);
},
},
],
@ -67,6 +71,35 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
);
},
},
{
key: `monitor#${monitor.id}#metrics`,
label: 'Metrics',
onClick: () => {
addItem(
'monitorMetrics',
monitor.id,
`${monitor.name}'s Metrics`
);
},
},
{
key: `monitor#${monitor.id}#chart`,
label: 'Chart',
onClick: () => {
addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`);
},
},
{
key: `monitor#${monitor.id}#events`,
label: 'Events',
onClick: () => {
addItem(
'monitorEvents',
monitor.id,
`${monitor.name}'s Events`
);
},
},
],
})),
},

9
src/client/components/dashboard/items/MonitorChartItem.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { MonitorDataChart } from '../../monitor/MonitorDataChart';
export const MonitorChartItem: React.FC<{
monitorId: string;
}> = React.memo((props) => {
return <MonitorDataChart monitorId={props.monitorId} />;
});
MonitorChartItem.displayName = 'MonitorChartItem';

9
src/client/components/dashboard/items/MonitorEventsItem.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { MonitorEventList } from '../../monitor/MonitorEventList';
export const MonitorEventsItem: React.FC<{
monitorId: string;
}> = React.memo((props) => {
return <MonitorEventList monitorId={props.monitorId} />;
});
MonitorEventsItem.displayName = 'MonitorEventsItem';

33
src/client/components/dashboard/items/MonitorMetricsItem.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import { trpc } from '../../../api/trpc';
import { NotFoundTip } from '../../NotFoundTip';
import { useCurrentWorkspaceId } from '../../../store/user';
import { Loading } from '../../Loading';
import { MonitorDataMetrics } from '../../monitor/MonitorDataMetrics';
export const MonitorMetricsItem: React.FC<{
monitorId: string;
}> = React.memo((props) => {
const workspaceId = useCurrentWorkspaceId();
const { data: monitorInfo, isLoading } = trpc.monitor.get.useQuery({
workspaceId,
monitorId: props.monitorId,
});
if (isLoading) {
return <Loading />;
}
if (!monitorInfo) {
return <NotFoundTip />;
}
return (
<MonitorDataMetrics
monitorId={monitorInfo.id}
monitorType={monitorInfo.type}
/>
);
});
MonitorMetricsItem.displayName = 'MonitorMetricsItem';

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

@ -8,6 +8,9 @@ import { DeleteOutlined } from '@ant-design/icons';
import { useEvent } from '../../../hooks/useEvent';
import { WebsiteEventItem } from './WebsiteEventItem';
import { MonitorHealthBarItem } from './MonitorHealthBarItem';
import { MonitorMetricsItem } from './MonitorMetricsItem';
import { MonitorChartItem } from './MonitorChartItem';
import { MonitorEventsItem } from './MonitorEventsItem';
interface DashboardGridItemProps {
item: DashboardItem;
@ -20,10 +23,16 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
const inner = useMemo(() => {
if (type === 'websiteOverview') {
return <WebsiteOverviewItem websiteId={id} />;
} else if (type === 'websiteEvent') {
} else if (type === 'websiteEvents') {
return <WebsiteEventItem websiteId={id} />;
} else if (type === 'monitorHealthBar') {
return <MonitorHealthBarItem monitorId={id} />;
} else if (type === 'monitorMetrics') {
return <MonitorMetricsItem monitorId={id} />;
} else if (type === 'monitorChart') {
return <MonitorChartItem monitorId={id} />;
} else if (type === 'monitorEvents') {
return <MonitorEventsItem monitorId={id} />;
} else {
return <NotFoundTip />;
}

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

@ -5,12 +5,11 @@ import { v1 as uuid } from 'uuid';
export type DashboardItemType =
| 'websiteOverview'
| 'websiteEvent'
| 'websiteEvents'
| 'monitorHealthBar'
| 'monitorStatus'
| 'monitorMetrics'
| 'monitorChart'
| 'monitorEvent'
| 'serverStatus';
| 'monitorEvents';
export interface DashboardItem {
key: string; // match with layout, not equal
@ -73,11 +72,10 @@ export const useDashboardStore = create<DashboardState>((set, get) => ({
}));
export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 },
websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 },
monitorHealthBar: { x: Infinity, y: Infinity, w: 2, h: 2 },
monitorStatus: { 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 },
serverStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
websiteOverview: { x: 0, y: Infinity, w: 4, h: 12 },
websiteEvents: { x: 0, y: Infinity, w: 2, h: 5 },
monitorHealthBar: { x: 0, y: Infinity, w: 2, h: 2 },
monitorMetrics: { x: 0, y: Infinity, w: 2, h: 3 },
monitorChart: { x: 0, y: Infinity, w: 2, h: 6 },
monitorEvents: { x: 0, y: Infinity, w: 2, h: 10 },
};