feat: minimal React table implementation

package.json

@@ -16,7 +16,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+<<<<<<< HEAD
     "history": "^5.0.1",
+=======
+>>>>>>> feat: minimal React table implementation
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-country-flag": "^2.3.1",
@@ -27,6 +30,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-syntax-highlighter": "^15.4.4",
+    "react-table": "^7.7.0",
     "remark-gfm": "^2.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "timeago-react": "^3.0.3",

src/components/Canary/index.js

@@ -19,6 +19,24 @@ import { StatCard } from "../StatCard";
 import { Modal } from "../Modal";
 import { Title } from "./renderers";
 
+import { TristateToggle } from "../TristateToggle";
+import { NewCanaryTable } from "./newTable";
+
+const layoutSelections = [
+  {
+    id: "dropdown-table",
+    name: "table",
+    icon: <BsTable />,
+    label: "Table"
+  },
+  {
+    id: "dropdown-card",
+    name: "card",
+    icon: <RiLayoutGridLine />,
+    label: "Card"
+  }
+];
+
 export class Canary extends React.Component {
   constructor(props) {
     super(props);
@@ -160,14 +178,15 @@ export class Canary extends React.Component {
           {layout === "table" && (
             <div className="m-6 mt-0 relative">
               <div className="sticky top-0 h-6 bg-white z-10" />
-              <CanaryTable
+              {/* <CanaryTable
                 theadClass="sticky top-6 z-10"
                 checks={checks}
                 groupedChecks={groupedChecks}
                 hasGrouping={hasGrouping}
                 groupingLabel={groupBy}
                 onClick={this.select}
-              />
+              /> */}
+              <NewCanaryTable checks={checks} />
             </div>
           )}
         </div>

src/components/Canary/newTable.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { RiContactsBookLine } from "react-icons/ri";
+import { useTable } from "react-table";
+import { GetName } from "./data";
+import { Duration, Percentage } from "./renderers";
+import { StatusList } from "./status";
+
+const styles = {
+  tableClass: "border border-green-500",
+  theadClass: "border border-red-500",
+  theadRowClass: "",
+  theadHeaderClass: "",
+  tbodyClass: "",
+  tbodyRowClass: "",
+  tbodyDataClass: ""
+};
+
+function HealthCell({ value }) {
+  return <StatusList checkStatuses={value} />;
+}
+
+function UptimeCell({ value }) {
+  return (
+    <Percentage upper={value.passed + value.failed} lower={value.passed} />
+  );
+}
+
+function LatencyCell({ value }) {
+  return <Duration ms={value.rolling1h} />;
+}
+
+export function NewCanaryTable({ checks, ...rest }) {
+  const data = useMemo(() => {
+    console.log(checks);
+    return checks.map((check) => ({
+      ...check,
+      name: GetName(check)
+    }));
+  }, [checks]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: "Checks",
+        accessor: "name"
+      },
+      {
+        Header: "Health",
+        accessor: "checkStatuses",
+        Cell: HealthCell
+      },
+      {
+        Header: "Uptime",
+        accessor: "uptime",
+        Cell: UptimeCell
+      },
+      {
+        Header: "Latency",
+        accessor: "latency",
+        Cell: LatencyCell
+      }
+    ],
+    []
+  );
+
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({ columns, data });
+
+  return (
+    <table className={styles.tableClass} {...getTableProps()}>
+      <thead className={styles.theadClass}>
+        {headerGroups.map((headerGroup) => (
+          <tr
+            className={styles.theadRowClass}
+            {...headerGroup.getHeaderGroupProps()}
+          >
+            {headerGroup.headers.map((column) => (
+              <th
+                className={styles.theadHeaderClass}
+                {...column.getHeaderProps()}
+              >
+                {column.render("Header")}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody className={styles.tbodyClass} {...getTableBodyProps()}>
+        {rows.map((row) => {
+          prepareRow(row);
+          return (
+            <tr
+              key={row.id}
+              className={styles.tbodyRowClass}
+              {...row.getRowProps()}
+            >
+              {row.cells.map((cell) => (
+                <td
+                  key={cell.column.Header}
+                  className={styles.tbodyDataClass}
+                  {...cell.getCellProps()}
+                >
+                  {cell.render("Cell")}
+                </td>
+              ))}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

src/components/Canary/status.js

@@ -26,6 +26,8 @@ export function StatusList({ check, checkStatuses }) {
   return "";
 }
 
+
+
 export function CanaryStatus({ status, className }) {
   if (status.mixed) {
     return <Status mixed={status.mixed} className={className} />;