custom peroprties in property table (#141)

ui/src/console/PropertyTable.js

@@ -36,8 +36,15 @@ const PropertyTable = (props) => {
         },
         {
             name: "Value",
-            selector: row => rowToValue(row),
-            sortable: true,
+            cell: row => {
+                if(props.custom) {
+                    if(row.property in props.custom) {
+                        console.log(Date.now());
+                        return props.custom[row.property](row);
+                    }
+                }
+                return rowToValue(row)
+            },
             grow: 3
         }
     ];

ui/src/console/detail/ShareDetail.js

@@ -3,7 +3,6 @@ import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
 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) => {
@@ -30,24 +29,18 @@ const ShareDetail = (props) => {
         }
     }, [props.selection]);
 
+    const customProperties = {
+        metrics: row => <Sparklines data={row.value} limit={60} height={10}>
+            <SparklinesLine color={"#3b2693"}/>
+            <SparklinesSpots/>
+        </Sparklines>
+    }
+
     if(detail) {
         return (
             <div>
                 <h2><Icon path={mdiShareVariant} size={2} />{" "}{detail.backendProxyEndpoint}</h2>
-                <Tabs defaultActiveKey={"activity"}>
-                    <Tab eventKey={"details"} className={"mb-3"}>
-                        <h3>Share Details</h3>
-                    </Tab>
-                    <Tab eventKey={"activity"}>
-                        <div className={"zrok-big-sparkline"}>
-                            <PropertyTable object={detail} />
-                            <Sparklines data={detail.metrics} limit={60} height={20}>
-                                <SparklinesLine color={"#3b2693"} />
-                                <SparklinesSpots />
-                            </Sparklines>
-                        </div>
-                    </Tab>
-                </Tabs>
+                <PropertyTable object={detail} custom={customProperties} />
             </div>
         );
     }