mirror of
https://github.com/openziti/zrok.git
synced 2024-12-23 07:09:12 +01:00
custom peroprties in property table (#141)
This commit is contained in:
parent
1aa003ce44
commit
5d27c608a3
@ -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
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user