Added Graphs on Status Page
This commit is contained in:
Its4Nik
parent
dec6a8b7c5
commit
c7e8b97f12
8
TODO
Normal file
8
TODO
Normal file
@ -0,0 +1,8 @@
|
||||
git clone https://github.com/msgbyte/tianji.git
|
||||
cd tianji
|
||||
pnpm install
|
||||
|
||||
pnpm build
|
||||
|
||||
|
||||
better dashboard
|
||||
21
build.sh
Normal file
21
build.sh
Normal file
@ -0,0 +1,21 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo
|
||||
echo "> > > BUILDING < < <"
|
||||
NODE_OPTIONS="--max-old-space-size=4096" npm run build
|
||||
|
||||
echo
|
||||
echo "> > > CD INTO src/server < < <"
|
||||
cd src/server
|
||||
|
||||
echo
|
||||
echo "> > > MIGRATIN DB < < <"
|
||||
pnpm db:migrate:apply
|
||||
|
||||
echo
|
||||
echo "> > > DELETING OLD PM2 < < <"
|
||||
pm2 del tianji
|
||||
|
||||
echo
|
||||
echo "> > > STARTING PM2 < < <"
|
||||
pm2 start ./dist/src/server/main.js --name tianji -f
|
||||
@ -18,13 +18,9 @@ services:
|
||||
POSTGRES_DB: tianji
|
||||
POSTGRES_USER: tianji
|
||||
POSTGRES_PASSWORD: tianji
|
||||
volumes:
|
||||
- tianji-db-data:/var/lib/postgresql/data
|
||||
restart: always
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
volumes:
|
||||
tianji-db-data:
|
||||
|
||||
25941
pnpm-lock.yaml
25941
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -157,7 +157,8 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4 text-right">
|
||||
<Area {...config} />
|
||||
<div className="mt-4 text-right">
|
||||
<Select
|
||||
className="w-20 text-center"
|
||||
size="small"
|
||||
@ -172,7 +173,6 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Area {...config} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import { last } from 'lodash-es';
|
||||
import { getMonitorProvider, getProviderDisplay } from './provider';
|
||||
import { Tooltip } from 'antd';
|
||||
import { useTranslation } from '@i18next-toolkit/react';
|
||||
|
||||
import { MonitorDataChart } from './MonitorDataChart';
|
||||
export const MonitorListItem: React.FC<{
|
||||
className?: string;
|
||||
workspaceId: string;
|
||||
@ -26,6 +26,8 @@ export const MonitorListItem: React.FC<{
|
||||
onClick,
|
||||
} = props;
|
||||
|
||||
const [showGraph, setShowGraph] = useState<boolean>(true);
|
||||
|
||||
const [beats, setBeats] = useState<
|
||||
({
|
||||
value: number;
|
||||
@ -67,56 +69,73 @@ export const MonitorListItem: React.FC<{
|
||||
}, [beats, provider]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
className,
|
||||
'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
|
||||
onClick && 'cursor-pointer'
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
|
||||
upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
|
||||
)}
|
||||
>
|
||||
{upPercent}%
|
||||
</span>
|
||||
</div>
|
||||
<div className={
|
||||
clsx(
|
||||
'flex justify-between items-center flex-col w-full h-fit',
|
||||
className
|
||||
)
|
||||
}>
|
||||
<div
|
||||
className={clsx(
|
||||
className,
|
||||
'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10 w-full',
|
||||
onClick && 'cursor-pointer'
|
||||
)}
|
||||
// onClick={onClick}
|
||||
onClick={() => {
|
||||
setShowGraph(!showGraph);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
|
||||
upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
|
||||
)}
|
||||
>
|
||||
{upPercent}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pl-2">
|
||||
<div className="text-base">{monitorName}</div>
|
||||
{/* <div>
|
||||
{monitor.tags.map((tag) => (
|
||||
<span
|
||||
className="py-0.5 px-1 rounded-full text-white text-sm"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="flex-1 pl-2">
|
||||
<div className="text-base">{monitorName}</div>
|
||||
{/* <div>
|
||||
{monitor.tags.map((tag) => (
|
||||
<span
|
||||
className="py-0.5 px-1 rounded-full text-white text-sm"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{showCurrentResponse && latestResponse && (
|
||||
<Tooltip title={t('Current')}>
|
||||
<div className="px-2 text-sm text-gray-800 dark:text-gray-400">
|
||||
{latestResponse}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showCurrentResponse && latestResponse && (
|
||||
<Tooltip title={t('Current')}>
|
||||
<div className="px-2 text-sm text-gray-800 dark:text-gray-400">
|
||||
{latestResponse}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<div className="flex items-center">
|
||||
<MonitorHealthBar
|
||||
workspaceId={workspaceId}
|
||||
monitorId={monitorId}
|
||||
monitorType={monitorType}
|
||||
onBeatsItemUpdate={setBeats}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<MonitorHealthBar
|
||||
workspaceId={workspaceId}
|
||||
monitorId={monitorId}
|
||||
monitorType={monitorType}
|
||||
onBeatsItemUpdate={setBeats}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{ monitorType != "ping" && showGraph ?
|
||||
<div className={clsx(
|
||||
"w-full px-5"
|
||||
)}>
|
||||
<MonitorDataChart monitorId={monitorId} />
|
||||
</div> : null }
|
||||
</div>
|
||||
|
||||
);
|
||||
});
|
||||
MonitorListItem.displayName = 'MonitorListItem';
|
||||
@ -2,6 +2,7 @@ import { create } from 'zustand';
|
||||
import { Layouts, Layout } from 'react-grid-layout';
|
||||
import { mapValues } from 'lodash-es';
|
||||
import { v1 as uuid } from 'uuid';
|
||||
import { MonitorDataChart } from '../monitor/MonitorDataChart';
|
||||
|
||||
export type DashboardItemType =
|
||||
| 'websiteOverview'
|
||||
@ -9,10 +10,11 @@ export type DashboardItemType =
|
||||
| 'monitorHealthBar'
|
||||
| 'monitorMetrics'
|
||||
| 'monitorChart'
|
||||
| 'monitorEvents';
|
||||
| 'monitorEvents'
|
||||
| 'monitorDataChart';
|
||||
|
||||
export interface DashboardItem {
|
||||
key: string; // match with layout, not equal
|
||||
key: string;
|
||||
id: string;
|
||||
title: string;
|
||||
type: DashboardItemType;
|
||||
@ -95,4 +97,10 @@ export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
|
||||
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 },
|
||||
monitorDataChart: { x: 0, y: Infinity, w: 2, h: 8 },
|
||||
};
|
||||
|
||||
// Add the MonitorDataChart component to be shown
|
||||
export const MonitorDataChartComponent = () => {
|
||||
return <MonitorDataChart />;
|
||||
};
|
||||
|
||||
Binary file not shown.
@ -0,0 +1 @@
|
||||
{"/root/.cache/node/corepack/pnpm/9.1.1/bin/pnpm.cjs":["bd892ee8afad79e5d0a0a10acc54600097dd1f90",0,1472],"/root/.cache/node/corepack/pnpm/9.1.1/dist/pnpm.cjs":["e9ead89357b68cedf28c338d6b142a17f2ada8ff",1472,882864]}
|
||||
Binary file not shown.
@ -0,0 +1 @@
|
||||
{"/root/.cache/node/corepack/pnpm/9.1.1/bin/pnpm.cjs":["bd892ee8afad79e5d0a0a10acc54600097dd1f90",0,1472],"/root/.cache/node/corepack/pnpm/9.1.1/dist/pnpm.cjs":["e9ead89357b68cedf28c338d6b142a17f2ada8ff",1472,882848]}
|
||||
Loading…
Reference in New Issue
Block a user