Global search filter

src/components/AppHeader.tsx

@@ -1,17 +1,57 @@
 import React from "react";
-import { Container, Typography } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import RadarIcon from "@mui/icons-material/Radar";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { useGlobalState } from "../GlobalStateProvider";
 
 export default function AppHeader() {
+    const [searchValue, setSearchValue] = React.useState("");
+    const { setState: setGlobalState } = useGlobalState();
+
+    const handleSearchInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+        const searchFilter = event.currentTarget.value;
+        setGlobalState({
+            searchFilter,
+        });
+        setSearchValue(event.currentTarget.value);
+    };
+    const handleClearSearchInputClick = () => {
+        setSearchValue("");
+        setGlobalState({
+            searchFilter: "",
+        });
+    };
+
     return (
-        <>
-            <Container maxWidth={false} className="app-header">
-                <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                    <RadarIcon fontSize="large" className="icon" />
-                    <Typography component="h1">pingator</Typography>
-                </Stack>
-            </Container>
-        </>
+        <Container maxWidth={false} className="app-header">
+            <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
+                <RadarIcon fontSize="large" className="icon" />
+                <Typography component="h1">pingator</Typography>
+
+                <TextField
+                    className="search-input"
+                    type="text"
+                    sx={{ backgroundColor: "white", marginLeft: "auto" }}
+                    label="Search"
+                    variant="filled"
+                    onChange={handleSearchInputChange}
+                    value={searchValue}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton size="small" onClick={handleClearSearchInputClick}>
+                                    <CancelIcon />
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
+                />
+            </Stack>
+        </Container>
     );
 }

src/components/dashboard/ServiceCard.tsx

@@ -5,7 +5,6 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
-import Chip from "@mui/material/Chip";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Avatar from "@mui/material/Avatar";
@@ -22,24 +21,6 @@ function normalizeServiceName(name: string): string {
         .replace(/\b\w/g, (s) => s.toUpperCase());
 }
 
-interface TenantsStatusTooltipProps {
-    tenantsStatus: StatusPerTenant;
-}
-
-function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) {
-    const statusItems = Object.entries(tenantsStatus).map(([key, value]) => {
-        console.log(`key: ${key}, value: ${value}`);
-        return null;
-    });
-
-    return (
-        <Box className="tenants-status-tooltip">
-            <Typography color="inherit">Tooltip with HTML</Typography>
-            <em>{"And here's"}</em> <b>{"some"}</b> <u>{"amazing content"}</u>. {"It's very engaging. Right?"}
-        </Box>
-    );
-}
-
 function getNodeNameElement(node: Node): React.ReactElement {
     let statusMessage;
     const statusOk = node.health_check_status?.status_ok;
@@ -69,7 +50,11 @@ function TenantsStatus({ statusPerTenant }: TenantsStatusProps) {
 
     for (const [tenantId, statusOk] of Object.entries(statusPerTenant)) {
         statuses.push(
-            <Typography component="div" className={`tenant-status ${statusOk ? "status-ok" : "status-error"}`}>
+            <Typography
+                key={tenantId}
+                component="div"
+                className={`tenant-status ${statusOk ? "status-ok" : "status-error"}`}
+            >
                 {tenantId}
             </Typography>
         );

src/components/dashboard/ServiceList.tsx

@@ -2,19 +2,27 @@ 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 serviceItems = services.map((service) => {
-        return (
-            <Grid key={service.name} sx={{ display: "flex" }}>
-                <ServiceCard service={service} />
-            </Grid>
-        );
-    });
+    const { state } = useGlobalState();
+
+    const serviceItems = services
+        .filter(
+            (service) =>
+                !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" sx={{ marginBottom: "1rem" }}>