Service filters

src/components/Dashboard.tsx

@@ -25,7 +25,6 @@ export default function Dashboard() {
     };
 
     const loadEnv = (envTab: EnvTab) => {
-        console.log("loading env:", envTab);
         setLoadingErr(null);
         setLoadingEnv(true);
 

src/components/dashboard/EnvironmentList.tsx

@@ -1,17 +1,41 @@
 import React from "react";
 import { Environment } from "types";
-import TenantList from "components/dashboard/TenantList";
+import TenantList, { tenantHasServices } from "components/dashboard/TenantList";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import { useGlobalState } from "GlobalStateProvider";
 
+function environmentHasTenants(env: Environment): boolean {
+    return env.tenants.filter((tenant) => tenantHasServices(tenant)).length > 0;
+}
+
 interface EnvironmentListProps {
     environments: Environment[];
 }
 
 export default function EnvironmentList({ environments }: EnvironmentListProps) {
-    const envItems = environments.map((env) => {
+    let filteredEnvironments: Environment[] = [];
+    const { state } = useGlobalState();
+
+    // deep clone array
+    filteredEnvironments = JSON.parse(JSON.stringify(environments));
+
+    // filter services
+    filteredEnvironments.forEach((env) => {
+        env.tenants.forEach((tenant) => {
+            tenant.services = tenant.services.filter(
+                (service) =>
+                    !state.searchFilter ||
+                    service.name.toLocaleLowerCase().includes(state.searchFilter.toLocaleLowerCase())
+            );
+        });
+    });
+
+    // remove empty environments
+    filteredEnvironments = filteredEnvironments.filter((env) => environmentHasTenants(env));
+
+    const envItems = filteredEnvironments.map((env) => {
         return (
             <Box className="environment" key={env.name} sx={{ marginBottom: "2rem" }}>
                 <Container maxWidth={false} className="main-container">

src/components/dashboard/ServiceList.tsx

@@ -2,27 +2,19 @@ import React from "react";
 import { Service } from "types";
 import Grid from "@mui/material/Unstable_Grid2";
 import ServiceCard from "./ServiceCard";
-import { useGlobalState } from "GlobalStateProvider";
 
 interface ServiceListProps {
     services: Service[];
 }
 
 export default function ServiceList({ services }: ServiceListProps) {
-    const { state } = useGlobalState();
+    const serviceItems = services.map((service) => {
-
+        return (
-    const serviceItems = services
+            <Grid key={service.name} sx={{ display: "flex" }}>
-        .filter(
+                <ServiceCard service={service} />
-            (service) =>
+            </Grid>
-                !state.searchFilter || service.name.toLocaleLowerCase().includes(state.searchFilter.toLocaleLowerCase())
+        );
-        )
+    });
-        .map((service) => {
-            return (
-                <Grid key={service.name} sx={{ display: "flex" }}>
-                    <ServiceCard service={service} />
-                </Grid>
-            );
-        });
 
     return (
         <Grid container rowSpacing={2} columnSpacing={2} className="service-list">

src/components/dashboard/TenantList.tsx

@@ -8,8 +8,14 @@ interface TenantListProps {
     tenants: Tenant[];
 }
 
+export function tenantHasServices(tenant: Tenant): boolean {
+    return tenant.services.length > 0;
+}
+
 export default function TenantList({ tenants }: TenantListProps) {
     const tenantItems = tenants.map((tenant) => {
+        if (!tenantHasServices(tenant)) return null;
+
         const tenantName = tenant.name !== "default" ? `Tenant: ${tenant.name}` : "Multitenant";
         return (
             <Box key={tenant.name} className="tenant">