custom peroprties in property table (#141)

This commit is contained in:
Michael Quigley 2023-01-03 14:21:26 -05:00
parent 1aa003ce44
commit 5d27c608a3
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 17 additions and 17 deletions

View File

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

View File

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