Make the admin page somewhat simpler by removing the complex table de…

…pendency and removing the date time formatting dependency

balancer/ui/package.json

@@ -4,10 +4,8 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@formatjs/intl-utils": "^3.8.4",
     "promise-retry": "^2.0.1",
     "react": "^18.3.1",
-    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.3.1",
     "react-intl": "^6.7.0",
     "react-router-dom": "^6.26.2",
@@ -43,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

balancer/ui/src/Components.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const H1 = styled.h1`
   font-size: 36px;
@@ -13,12 +13,18 @@ export const H2 = styled.h2`
   margin-bottom: 24px;
 `;
 
-export const H3 = styled.h2`
+export const H3 = styled.h3`
   font-size: 32px;
   font-weight: 500;
   margin: 0;
 `;
 
+export const H4 = styled.h4`
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0;
+`;
+
 export const Input = styled.input`
   background-color: #d8d8d8;
   border: none;
@@ -66,10 +72,9 @@ export const Button = styled.button`
     background-color: #cf3a234d;
     cursor: wait;
   }
-  `;
-
-  export const SecondaryButton = styled(Button)`
-  margin: 0 0 0 5px;
+`;
+
+export const SecondaryButton = styled(Button)`
   width: auto;
   background-color: #d8d8d8;
   color: #232323;
@@ -82,7 +87,7 @@ export const Button = styled.button`
 export const Card = styled.div`
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0px;
-  background-color: #fff;
+  background-color: var(--background-highlight);
 `;
 
 export const BodyCard = styled(Card)`

balancer/ui/src/components/ReadableTimestamp.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+function formatRelativeTime(date) {
+  const now = new Date();
+  const seconds = Math.floor((now - date) / 1000);
+
+  const units = [
+    { max: 60, value: 1, name: "second" },
+    { max: 3600, value: 60, name: "minute" },
+    { max: 86400, value: 3600, name: "hour" },
+    { max: 2592000, value: 86400, name: "day" },
+    { max: 31536000, value: 2592000, name: "month" },
+    { max: Infinity, value: 31536000, name: "year" },
+  ];
+
+  const { value, name } = units.find((unit) => Math.abs(seconds) < unit.max);
+  const relativeTime = Math.floor(seconds / value);
+
+  return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(
+    -relativeTime,
+    name
+  );
+}
+
+function formatAbsoluteTime(date) {
+  return new Intl.DateTimeFormat("en", {
+    dateStyle: "long",
+    timeStyle: "short",
+  }).format(date);
+}
+
+export function ReadableTimestamp({ date }) {
+  return (
+    <span title={formatAbsoluteTime(date)}>{formatRelativeTime(date)}</span>
+  );
+}

balancer/ui/src/components/ReadableTimestamp.test.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ReadableTimestamp } from "./ReadableTimestamp";
+import { describe, test, expect } from "vitest";
+
+describe(`${ReadableTimestamp.name} Component`, () => {
+  test.each([
+    {
+      date: new Date(Date.now() - 10 * 1000),
+      expectedRegex: /10 seconds ago/i,
+    },
+    {
+      date: new Date(Date.now() - 5 * 60 * 1000),
+      expectedRegex: /5 minutes ago/i,
+    },
+    {
+      date: new Date(Date.now() - 2 * 60 * 60 * 1000),
+      expectedRegex: /2 hours ago/i,
+    },
+    {
+      date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
+      expectedRegex: /3 days ago/i,
+    },
+    {
+      date: new Date(Date.now() - 1 * 30 * 24 * 60 * 60 * 1000),
+      expectedRegex: /last month/i,
+    },
+    {
+      date: new Date(Date.now() - 2 * 365 * 24 * 60 * 60 * 1000),
+      expectedRegex: /2 years ago/i,
+    },
+  ])("renders correct relative time for date", ({ date, expectedRegex }) => {
+    render(<ReadableTimestamp date={date} />);
+
+    const spanElement = screen.getByText(expectedRegex);
+    expect(spanElement).toBeInTheDocument();
+  });
+});