0.10.8 - Adds sorting for monitor heartbeats

app/components/monitor/table.tsx

@@ -0,0 +1,103 @@
+import { useState, type ReactNode } from 'react';
+
+type Column<T> = {
+  key: keyof T;
+  label: string;
+  sortable?: boolean;
+  render?: (value: any, row: T) => ReactNode;
+  defaultValue?: string;
+};
+
+type TableProps<T> = {
+  columns: Column<T>[];
+  data: T[];
+  initialSortKey?: keyof T;
+  initialSortDirection?: 'asc' | 'desc';
+  className?: string;
+};
+
+function sortData<T>(data: T[], key: keyof T, direction: 'asc' | 'desc') {
+  return [...data].sort((a, b) => {
+    const aValue = a[key];
+    const bValue = b[key];
+    if (aValue == null && bValue == null) return 0;
+    if (aValue == null) return 1;
+    if (bValue == null) return -1;
+    if (aValue < bValue) return direction === 'asc' ? -1 : 1;
+    if (aValue > bValue) return direction === 'asc' ? 1 : -1;
+
+    return 0;
+  });
+}
+
+export function Table<T extends Record<string, any>>({
+  columns,
+  data,
+  initialSortKey,
+  initialSortDirection = 'asc',
+  className = '',
+}: TableProps<T>) {
+  const [sortKey, setSortKey] = useState<keyof T | undefined>(initialSortKey);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(
+    initialSortDirection
+  );
+
+  const handleSort = (key: keyof T) => {
+    if (sortKey === key) {
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortKey(key);
+      setSortDirection('asc');
+    }
+  };
+
+  const sortedData = sortKey ? sortData(data, sortKey, sortDirection) : data;
+
+  return (
+    <div className={`monitor-uptime-container ${className}`}>
+      <div className="monitor-uptime-header-container">
+        {columns.map((col) => (
+          <div key={String(col.key)} className="monitor-uptime-header">
+            {col.sortable ? (
+              <button
+                type="button"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
+                  font: 'inherit',
+                  cursor: 'pointer',
+                  color: 'inherit',
+                }}
+                onClick={() => handleSort(col.key)}
+                aria-label={`Sort by ${col.label}`}
+              >
+                {col.label}
+                {sortKey === col.key ? (
+                  <span style={{ marginLeft: 6 }}>
+                    {sortDirection === 'asc' ? '◮' : '⧨'}
+                  </span>
+                ) : null}
+              </button>
+            ) : (
+              col.label
+            )}
+          </div>
+        ))}
+      </div>
+      {sortedData.map((row, rowIdx) => (
+        <div className="monitor-uptime-content" key={rowIdx}>
+          {columns.map((col) =>
+            col.render ? (
+              col.render(row[col.key], row)
+            ) : (
+              <div className="monitor-uptime-info" key={String(col.key)}>
+                {row[col.key] || col.defaultValue}
+              </div>
+            )
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

app/components/monitor/uptime.tsx

@@ -1,12 +1,15 @@
 import './uptime.scss';
 
 // import dependencies
+import dayjs from 'dayjs';
 import { useMemo } from 'react';
+import classNames from 'classnames';
+import { Tooltip } from '@lunalytics/ui';
+import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 
 // import local files
-import UptimeInfo from './updateInfo';
-import { observer } from 'mobx-react-lite';
+import { Table } from './table';
 import useContextStore from '../../context';
 
 const MonitorUptime = () => {
@@ -16,41 +19,87 @@ const MonitorUptime = () => {
     globalStore: { activeMonitor },
   } = useContextStore();
 
-  const heartbeatList = useMemo(() => {
-    const highestLatency =
+  const highestLatency = useMemo(() => {
+    return (
       activeMonitor?.heartbeats?.reduce((acc, curr) => {
         return Math.max(acc, curr.latency);
-      }, 0) || 0;
-
-    const heartbeatList = activeMonitor?.heartbeats?.map((heartbeat) => (
-      <UptimeInfo
-        key={heartbeat.id}
-        heartbeat={heartbeat}
-        highestLatency={highestLatency}
-      />
-    ));
-
-    return heartbeatList;
+      }, 0) || 0
+    );
   }, [JSON.stringify(activeMonitor)]);
 
   return (
-    <div className="monitor-uptime-container">
-      <div className="monitor-uptime-header-container">
-        <div className="monitor-uptime-header">
-          {t('home.monitor.table.status')}
-        </div>
-        <div className="monitor-uptime-header">
-          {t('home.monitor.table.time')}
-        </div>
-        <div className="monitor-uptime-header">
-          {t('home.monitor.table.message')}
-        </div>
-        <div className="monitor-uptime-header">
-          {t('home.monitor.headers.latency')}
-        </div>
-      </div>
-      {heartbeatList}
-    </div>
+    <>
+      {activeMonitor?.heartbeats && (
+        <Table
+          columns={[
+            {
+              key: 'isDown',
+              label: t('home.monitor.table.status'),
+              sortable: true,
+              render: (value) => {
+                const classes = classNames('monitor-uptime-info-button', {
+                  'monitor-uptime-info-button-inactive': value,
+                  'monitor-uptime-info-button-active': !value,
+                });
+
+                return (
+                  <div className={classes}>
+                    {value
+                      ? t('home.monitor.table.down')
+                      : t('home.monitor.table.up')}
+                  </div>
+                );
+              },
+            },
+            {
+              key: 'date',
+              label: t('home.monitor.table.time'),
+              sortable: true,
+              render: (value) => (
+                <div className="monitor-uptime-info">
+                  {dayjs(new Date(value).toLocaleString('en-US', {})).format(
+                    `DD/MM/YYYY HH:mm:ss`
+                  )}
+                </div>
+              ),
+            },
+            {
+              key: 'message',
+              label: t('home.monitor.table.message'),
+              sortable: true,
+              defaultValue: 'Unknown',
+            },
+            {
+              key: 'latency',
+              label: t('home.monitor.headers.latency'),
+              sortable: true,
+              render: (value) => (
+                <Tooltip
+                  text={`${t('home.monitor.headers.latency')}: ${value} ms`}
+                  color="gray"
+                >
+                  <div className="monitor-uptime-info-bar-container">
+                    <div className="monitor-uptime-info-bar-content">
+                      <div
+                        style={{
+                          width: `${Math.floor(
+                            (100 / highestLatency) * value
+                          )}%`,
+                        }}
+                        className="monitor-uptime-info-bar"
+                      />
+                    </div>
+                  </div>
+                </Tooltip>
+              ),
+            },
+          ]}
+          data={activeMonitor?.heartbeats}
+          initialSortKey="date"
+          initialSortDirection="desc"
+        />
+      )}
+    </>
   );
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lunalytics",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "Open source Node.js server/website monitoring tool",
   "private": true,
   "author": "KSJaay <ksjaay@gmail.com>",

server/middleware/user/connections/delete.js

@@ -1,3 +1,4 @@
+import { deleteConnection } from '../../../database/queries/connection.js';
 import { handleError } from '../../../utils/errors.js';
 
 const deleteConnectionMiddleware = async (request, response) => {