expandable rows for services

ui/src/Environments.js

@@ -1,4 +1,5 @@
 import DataTable from 'react-data-table-component';
+import Services from './Services';
 
 const Environments = (props) => {
     const columns = [
@@ -29,6 +30,9 @@ const Environments = (props) => {
         },
     ]
 
+    const servicesComponent = ({ data }) => <Services services={data.services} />
+    const servicesExpanded = row => row.services != null && row.services.length > 0
+
     return (
         <div>
             <h2>Environments</h2>
@@ -38,6 +42,9 @@ const Environments = (props) => {
                         columns={columns}
                         data={props.overview}
                         defaultSortFieldId={1}
+                        expandableRows
+                        expandableRowsComponent={servicesComponent}
+                        expandableRowExpanded={servicesExpanded}
                     />
                 </div>
             )}

ui/src/Services.js

@@ -0,0 +1,31 @@
+import DataTable from 'react-data-table-component';
+import {useEffect} from "react";
+
+const Services = (props) => {
+	useEffect((props) => {
+		console.log(props)
+	}, [])
+
+	const columns = [
+		{
+			name: 'Endpoint',
+			selector: row => row.endpoint,
+			sortable: true,
+		},
+		{
+			name: 'Service Id',
+			selector: row => row.zitiServiceId,
+			sortable: true,
+		}
+	]
+
+	return (
+		<div className={"nested-services"}>
+			{ props.services && props.services.length > 0 && (
+				<DataTable columns={columns} data={props.services} defaultSortFieldId={1}/>
+			)}
+		</div>
+	)
+}
+
+export default Services;

ui/src/index.css

@@ -121,4 +121,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .react-flow__attribution {
   display: none;
+}
+
+.nested-services {
+  padding-left: 10em;
 }