mirror of
https://github.com/openziti/zrok.git
synced 2024-11-22 16:13:47 +01:00
more detail elaboration (#141)
This commit is contained in:
parent
0dac9f4f34
commit
f019cd7fa8
@ -1,6 +1,6 @@
|
||||
import EnvironmentDetail from "./EnvironmentDetail";
|
||||
import AccountDetail from "./AccountDetail";
|
||||
import ServiceDetail from "./ServiceDetail";
|
||||
import ShareDetail from "./ShareDetail";
|
||||
import EnvironmentDetail from "./environment/EnvironmentDetail";
|
||||
|
||||
const Detail = (props) => {
|
||||
let detailComponent = <h1>{props.selection.id} ({props.selection.type})</h1>;
|
||||
@ -15,7 +15,7 @@ const Detail = (props) => {
|
||||
break;
|
||||
|
||||
case "service":
|
||||
detailComponent = <ServiceDetail selection={props.selection} />;
|
||||
detailComponent = <ShareDetail selection={props.selection} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -3,8 +3,9 @@ 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";
|
||||
|
||||
const ServiceDetail = (props) => {
|
||||
const ShareDetail = (props) => {
|
||||
const [detail, setDetail] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
@ -32,16 +33,23 @@ const ServiceDetail = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<h2><Icon path={mdiShareVariant} size={2} />{" "}{detail.backendProxyEndpoint}</h2>
|
||||
<div className={"zrok-big-sparkline"}>
|
||||
<Sparklines data={detail.metrics} limit={60} height={20}>
|
||||
<SparklinesLine color={"#3b2693"} />
|
||||
<SparklinesSpots />
|
||||
</Sparklines>
|
||||
</div>
|
||||
<Tabs defaultActiveKey={"activity"}>
|
||||
<Tab eventKey={"details"} className={"mb-3"}>
|
||||
<h3>Share Details</h3>
|
||||
</Tab>
|
||||
<Tab eventKey={"activity"}>
|
||||
<div className={"zrok-big-sparkline"}>
|
||||
<Sparklines data={detail.metrics} limit={60} height={20}>
|
||||
<SparklinesLine color={"#3b2693"} />
|
||||
<SparklinesSpots />
|
||||
</Sparklines>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export default ServiceDetail;
|
||||
export default ShareDetail;
|
@ -1,11 +1,11 @@
|
||||
import * as metadata from "../../api/metadata";
|
||||
import * as metadata from "../../../api/metadata";
|
||||
import {useEffect, useState} from "react";
|
||||
import DataTable from 'react-data-table-component';
|
||||
import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
|
||||
import {mdiConsoleNetwork} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
const EnvironmentDetail = (props) => {
|
||||
const Activity = (props) => {
|
||||
const [detail, setDetail] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
@ -57,7 +57,6 @@ const EnvironmentDetail = (props) => {
|
||||
{
|
||||
name: "Activity",
|
||||
cell: row => {
|
||||
console.log(row.metrics);
|
||||
return <Sparklines data={row.metrics} height={20} limit={60}><SparklinesLine color={"#3b2693"}/><SparklinesSpots/></Sparklines>;
|
||||
}
|
||||
}
|
||||
@ -65,20 +64,17 @@ const EnvironmentDetail = (props) => {
|
||||
|
||||
if(detail.environment) {
|
||||
return (
|
||||
<div>
|
||||
<h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
|
||||
<div className={"zrok-datatable"}>
|
||||
<DataTable
|
||||
className={"zrok-datatable"}
|
||||
data={detail.services}
|
||||
columns={columns}
|
||||
defaultSortField={1}
|
||||
/>
|
||||
</div>
|
||||
<div className={"zrok-datatable"}>
|
||||
<DataTable
|
||||
className={"zrok-datatable"}
|
||||
data={detail.services}
|
||||
columns={columns}
|
||||
defaultSortField={1}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export default EnvironmentDetail;
|
||||
export default Activity;
|
7
ui/src/console/detail/environment/Detail.js
Normal file
7
ui/src/console/detail/environment/Detail.js
Normal file
@ -0,0 +1,7 @@
|
||||
const Detail = (props) => {
|
||||
return (
|
||||
<h3>{props.environment.zId}</h3>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
37
ui/src/console/detail/environment/EnvironmentDetail.js
Normal file
37
ui/src/console/detail/environment/EnvironmentDetail.js
Normal file
@ -0,0 +1,37 @@
|
||||
import {Tab, Tabs} from "react-bootstrap";
|
||||
import Activity from "./Activity";
|
||||
import {useEffect, useState} from "react";
|
||||
import Icon from "@mdi/react";
|
||||
import {mdiConsoleNetwork} from "@mdi/js";
|
||||
import {getEnvironmentDetail} from "../../../api/metadata";
|
||||
import Detail from "./Detail";
|
||||
|
||||
const EnvironmentDetail = (props) => {
|
||||
const [detail, setDetail] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
getEnvironmentDetail(props.selection.id)
|
||||
.then(resp => {
|
||||
setDetail(resp.data);
|
||||
});
|
||||
}, [props.selection]);
|
||||
|
||||
if(detail.environment) {
|
||||
return (
|
||||
<div>
|
||||
<h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
|
||||
<Tabs defaultActiveKey={"activity"} className={"mb-3"}>
|
||||
<Tab eventKey={"activity"} title={"Activity"}>
|
||||
<Activity selection={props.selection} />
|
||||
</Tab>
|
||||
<Tab eventKey={"detail"} title={"Detail"}>
|
||||
<Detail environment={detail.environment} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default EnvironmentDetail;
|
@ -57,6 +57,11 @@ code, pre {
|
||||
font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/*
|
||||
#zrok-enable {
|
||||
text-align: center;
|
||||
|
Loading…
Reference in New Issue
Block a user