more detail elaboration (#141)

This commit is contained in:
Michael Quigley 2023-01-03 13:28:11 -05:00
parent 0dac9f4f34
commit f019cd7fa8
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
6 changed files with 78 additions and 25 deletions

View File

@ -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 (

View File

@ -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;

View File

@ -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;

View File

@ -0,0 +1,7 @@
const Detail = (props) => {
return (
<h3>{props.environment.zId}</h3>
);
};
export default Detail;

View 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;

View File

@ -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;