more detail elaboration (#141)

ui/src/console/detail/Detail.js

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

ui/src/console/detail/ShareDetail.js

@@ -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"}>
+                <Tabs defaultActiveKey={"activity"}>
-                    <Sparklines data={detail.metrics} limit={60} height={20}>
+                    <Tab eventKey={"details"} className={"mb-3"}>
-                        <SparklinesLine color={"#3b2693"} />
+                        <h3>Share Details</h3>
-                        <SparklinesSpots />
+                    </Tab>
-                    </Sparklines>
+                    <Tab eventKey={"activity"}>
-                </div>
+                        <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;

ui/src/console/detail/environment/Activity.js

@@ -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>
+            <div className={"zrok-datatable"}>
-                <h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
+                <DataTable
-                <div className={"zrok-datatable"}>
+                    className={"zrok-datatable"}
-                    <DataTable
+                    data={detail.services}
-                        className={"zrok-datatable"}
+                    columns={columns}
-                        data={detail.services}
+                    defaultSortField={1}
-                        columns={columns}
+                />
-                        defaultSortField={1}
-                    />
-                </div>
             </div>
         );
     }
     return <></>;
 }
 
-export default EnvironmentDetail;
+export default Activity;

ui/src/console/detail/environment/Detail.js

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

ui/src/console/detail/environment/EnvironmentDetail.js

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

ui/src/index.css

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