Graphs for Dashboard

.gitignore

@@ -26,3 +26,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+
+# add:
+docker-compose.yaml
+build.sh
+TODO

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
-      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';
+MonitorListItem.displayName = 'MonitorListItem';

src/client/store/dashboard.ts

@@ -2,17 +2,19 @@ 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'
   | 'websiteEvents'
   | '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 />;
 };