environment panel (#724)

ui100/src/ApiConsole.tsx

@@ -94,7 +94,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
                     break;
 
                 case "environment":
-                    setSidePanel(<EnvironmentPanel environment={selectedNode} />);
+                    setSidePanel(<EnvironmentPanel environment={selectedNode} user={user} />);
                     break;
 
                 case "share":

ui100/src/EnvironmentPanel.tsx

@@ -1,21 +1,54 @@
 import {Node} from "@xyflow/react";
 import {Grid2, Typography} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
-import {SparkLineChart} from "@mui/x-charts";
+import {User} from "./model/user.ts";
+import {useEffect, useState} from "react";
+import {Configuration, Environment, MetadataApi} from "./api";
+import PropertyTable from "./PropertyTable.tsx";
+import SecretToggle from "./SecretToggle.tsx";
 
 interface EnvironmentPanelProps {
     environment: Node;
+    user: User;
 }
 
-const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
+const EnvironmentPanel = ({ environment, user }: EnvironmentPanelProps) => {
+    const [detail, setDetail] = useState<Environment>(null);
+
+    const customProperties = {
+        zId: row => <SecretToggle secret={row.value} />,
+        createdAt: row => new Date(row.value).toLocaleString(),
+        updatedAt: row => new Date(row.value).toLocaleString()
+    }
+
+    useEffect(() => {
+        let cfg = new Configuration({
+            headers: {
+                "X-TOKEN": user.token
+            }
+        });
+        let metadata = new MetadataApi(cfg);
+        metadata.getEnvironmentDetail({envZId: environment.data!.envZId! as string})
+            .then(d => {
+                let env = d.environment!;
+                delete env.activity;
+                delete env.limited;
+                setDetail(env);
+            })
+            .catch(e => {
+                console.log("EnvironmentPanel", e);
+            })
+    }, [environment]);
+
     return (
         <Typography component="div">
-            <Grid2 container spacing={2}>
-                <Grid2 >
-                    <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                        <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
-                        <Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
-                    </Grid2>
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
+                <Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
+            </Grid2>
+            <Grid2 container sx={{ flexGrow: 1 }}>
+                <Grid2 display="flex">
+                    <PropertyTable object={detail} custom={customProperties} />
                 </Grid2>
             </Grid2>
         </Typography>

ui100/src/PropertyTable.tsx

@@ -35,7 +35,7 @@ const PropertyTable = ({ object, custom }: PropertyTableProps) => {
                 <TableBody>
                     {data.map((row) => (
                         <TableRow key={row.id}>
-                            <TableCell>{camelToWords(row.property)}</TableCell>
+                            <TableCell sx={{ width: 100 }}>{camelToWords(row.property)}</TableCell>
                             <TableCell sx={{ width: 1000 }}>{value(row)}</TableCell>
                         </TableRow>
                     ))}

ui100/src/model/util.ts

@@ -8,6 +8,7 @@ export const objectToRows = (obj) => {
             value: obj[key]
         });
     }
+    rows.sort((a, b) => a.property.localeCompare(b.property));
     return rows;
 };