Added Graphs on Status Page

TODO

@@ -0,0 +1,8 @@
+git clone https://github.com/msgbyte/tianji.git
+cd tianji
+pnpm install
+
+pnpm build
+
+
+better dashboard

build.sh

@@ -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

docker-compose.yml

@@ -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:

src/client/components/monitor/MonitorDataChart.tsx

@@ -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>
     );
   }

src/client/components/monitor/MonitorListItem.tsx

@@ -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,13 +69,22 @@ export const MonitorListItem: React.FC<{
   }, [beats, provider]);
 
   return (
+    <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',
+          '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={onClick}
+        onClick={() => {
+          setShowGraph(!showGraph);
+        }}
       >
         <div>
           <span
@@ -117,6 +128,14 @@ export const MonitorListItem: React.FC<{
           />
         </div>
       </div>
+      { monitorType != "ping" && showGraph ?
+      <div className={clsx(
+        "w-full px-5"
+      )}>
+        <MonitorDataChart monitorId={monitorId} />
+      </div> : null }
+    </div>
+    
   );
 });
 MonitorListItem.displayName = 'MonitorListItem';

src/client/store/dashboard.ts

@@ -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 />;
 };

src/server/v8-compile-cache-0/x64/11.3.244.8-node.17/zSusrzSlocalzSlibzSnode_moduleszScorepackzSdistzSpnpm.js.MAP

@@ -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]}

src/shared/v8-compile-cache-0/x64/11.3.244.8-node.17/zSusrzSlocalzSlibzSnode_moduleszScorepackzSdistzSpnpm.js.MAP

@@ -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]}