property table and friends (#141)

ui/src/console/PropertyTable.js

@@ -0,0 +1,48 @@
+import {useEffect, useState} from "react";
+import DataTable from "react-data-table-component";
+
+const objectToRows = (obj) => {
+    let rows = [];
+    for(const key in obj) {
+        rows.push({
+            property: key,
+            value: obj[key]
+        });
+    }
+    return rows;
+};
+
+const camelToWords = (s) => s.replace(/([A-Z])/g, ' $1').replace(/^./, function(str){ return str.toUpperCase(); });
+
+const rowToValue = (row) => {
+    if(row.property.endsWith("At")) {
+        return new Date(row.value).toLocaleString();
+    }
+    return row.value;
+};
+
+const PropertyTable = (props) => {
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        setData(objectToRows(props.object));
+    }, [props.object]);
+
+    const columns = [
+        {
+            name: "Property",
+            selector: row => camelToWords(row.property),
+            sortable: true
+        },
+        {
+            name: "Value",
+            selector: row => rowToValue(row),
+            sortable: true,
+            grow: 3
+        }
+    ];
+
+    return <DataTable columns={columns} data={data} className={"zrok-datatable"} />;
+};
+
+export default PropertyTable;

ui/src/console/detail/AccountDetail.js

@@ -1,10 +1,12 @@
 import {mdiCardAccountDetails} from "@mdi/js";
 import Icon from "@mdi/react";
+import PropertyTable from "../PropertyTable";
 
 const AccountDetail = (props) => {
     return (
         <div>
             <h2><Icon path={mdiCardAccountDetails} size={2} />{" "}{props.user.email}</h2>
+            <PropertyTable object={props.user} />
         </div>
     );
 }

ui/src/console/detail/ShareDetail.js

@@ -4,6 +4,7 @@ import {useEffect, useState} from "react";
 import {mdiShareVariant} from "@mdi/js";
 import Icon from "@mdi/react";
 import {Tab, Tabs} from "react-bootstrap";
+import PropertyTable from "../PropertyTable";
 
 const ShareDetail = (props) => {
     const [detail, setDetail] = useState({});
@@ -39,6 +40,7 @@ const ShareDetail = (props) => {
                     </Tab>
                     <Tab eventKey={"activity"}>
                         <div className={"zrok-big-sparkline"}>
+                            <PropertyTable object={detail} />
                             <Sparklines data={detail.metrics} limit={60} height={20}>
                                 <SparklinesLine color={"#3b2693"} />
                                 <SparklinesSpots />

ui/src/console/detail/environment/Detail.js

@@ -1,6 +1,8 @@
+import PropertyTable from "../../PropertyTable";
+
 const Detail = (props) => {
     return (
-        <h3>{props.environment.zId}</h3>
+        <PropertyTable object={props.environment} />
     );
 };