better environment detail organization; actions-tab (#142)

ui/src/console/detail/Detail.js

@@ -1,6 +1,6 @@
 import AccountDetail from "./AccountDetail";
 import ShareDetail from "./ShareDetail";
-import Environment from "./environment/Environment";
+import EnvironmentDetail from "./environment/EnvironmentDetail";
 
 const Detail = (props) => {
     let detailComponent = <h1>{props.selection.id} ({props.selection.type})</h1>;
@@ -11,7 +11,7 @@ const Detail = (props) => {
             break;
 
         case "environment":
-            detailComponent = <Environment selection={props.selection} />;
+            detailComponent = <EnvironmentDetail selection={props.selection} />;
             break;
 
         case "share":

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

@@ -0,0 +1,16 @@
+import {Button} from "react-bootstrap";
+
+const ActionsTab = (props) => {
+    return (
+        <div class={"actions-tab"}>
+            <h3>Delete your environment '{props.environment.description}' ({props.environment.zId})?</h3>
+            <p>
+                This will remove all shares from this environment, and will remove the environment from the network. You
+                will still need to terminate backends and <code>disable</code> your local environment.
+            </p>
+            <Button variant={"danger"}>Delete '{props.environment.description}'</Button>
+        </div>
+    );
+};
+
+export default ActionsTab;

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

@@ -4,7 +4,7 @@ import {mdiEyeOffOutline, mdiEyeOutline} from "@mdi/js";
 import {secretString} from "../util";
 import {useState} from "react";
 
-const Detail = (props) => {
+const DetailTab = (props) => {
     const [showZId, setShowZId] = useState(false);
 
     const customProperties = {
@@ -22,4 +22,4 @@ const Detail = (props) => {
     );
 };
 
-export default Detail;
+export default DetailTab;

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

@@ -1,12 +1,13 @@
 import {Tab, Tabs} from "react-bootstrap";
-import Shares from "./Shares";
+import SharesTab from "./SharesTab";
 import {useEffect, useState} from "react";
 import Icon from "@mdi/react";
 import {mdiConsoleNetwork} from "@mdi/js";
 import {getEnvironmentDetail} from "../../../api/metadata";
-import Detail from "./Detail";
+import DetailTab from "./DetailTab";
+import ActionsTab from "./ActionsTab";
 
-const Environment = (props) => {
+const EnvironmentDetail = (props) => {
     const [detail, setDetail] = useState({});
 
     useEffect(() => {
@@ -22,10 +23,13 @@ const Environment = (props) => {
                 <h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
                 <Tabs defaultActiveKey={"shares"} className={"mb-3"}>
                     <Tab eventKey={"shares"} title={"Shares"}>
-                        <Shares selection={props.selection} />
+                        <SharesTab selection={props.selection} />
                     </Tab>
                     <Tab eventKey={"detail"} title={"Detail"}>
-                        <Detail environment={detail.environment} />
+                        <DetailTab environment={detail.environment} />
+                    </Tab>
+                    <Tab eventKey={"actions"} title={"Actions"}>
+                        <ActionsTab environment={detail.environment} />
                     </Tab>
                 </Tabs>
             </div>
@@ -34,4 +38,4 @@ const Environment = (props) => {
     return <></>;
 };
 
-export default Environment;
+export default EnvironmentDetail;

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

@@ -5,7 +5,7 @@ import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
 import {mdiConsoleNetwork} from "@mdi/js";
 import Icon from "@mdi/react";
 
-const Shares = (props) => {
+const SharesTab = (props) => {
     const [detail, setDetail] = useState({});
 
     useEffect(() => {
@@ -78,4 +78,4 @@ const Shares = (props) => {
     return <></>;
 }
 
-export default Shares;
+export default SharesTab;

ui/src/index.css

@@ -105,3 +105,10 @@ code, pre {
 .errorMessage {
     color: deeppink;
 }
+
+.actions-tab {
+    margin-top: 50px;
+}
+.actions-tab p {
+    font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
+}