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,56 +69,73 @@ export const MonitorListItem: React.FC<{
   }, [beats, provider]);
 
   return (
-    <div
+    <div className={
-      className={clsx(
+      clsx(
-        className,
+        'flex justify-between items-center flex-col w-full h-fit',
-        'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
+        className
-        onClick && 'cursor-pointer'
+      )
-      )}
+    }>
-      onClick={onClick}
+      <div
-    >
+        className={clsx(
-      <div>
+          className,
-        <span
+          'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10 w-full',
-          className={clsx(
+          onClick && 'cursor-pointer'
-            'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
+        )}
-            upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
+        // onClick={onClick}
-          )}
+        onClick={() => {
-        >
+          setShowGraph(!showGraph);
-          {upPercent}%
+        }}
-        </span>
+      >
-      </div>
+        <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="flex-1 pl-2">
-        <div className="text-base">{monitorName}</div>
+          <div className="text-base">{monitorName}</div>
-        {/* <div>
+          {/* <div>
-              {monitor.tags.map((tag) => (
+                {monitor.tags.map((tag) => (
-                <span
+                  <span
-                  className="py-0.5 px-1 rounded-full text-white text-sm"
+                    className="py-0.5 px-1 rounded-full text-white text-sm"
-                  style={{ backgroundColor: tag.color }}
+                    style={{ backgroundColor: tag.color }}
-                >
+                  >
-                  {tag.label}
+                    {tag.label}
-                </span>
+                  </span>
-              ))}
+                ))}
-            </div> */}
+              </div> */}
-      </div>
+        </div>
 
-      {showCurrentResponse && latestResponse && (
+        {showCurrentResponse && latestResponse && (
-        <Tooltip title={t('Current')}>
+          <Tooltip title={t('Current')}>
-          <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
+            <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
-            {latestResponse}
+              {latestResponse}
-          </div>
+            </div>
-        </Tooltip>
+          </Tooltip>
-      )}
+        )}
 
-      <div className="flex items-center">
+        <div className="flex items-center">
-        <MonitorHealthBar
+          <MonitorHealthBar
-          workspaceId={workspaceId}
+            workspaceId={workspaceId}
-          monitorId={monitorId}
+            monitorId={monitorId}
-          monitorType={monitorType}
+            monitorType={monitorType}
-          onBeatsItemUpdate={setBeats}
+            onBeatsItemUpdate={setBeats}
-        />
+          />
+        </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]}