diff --git a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx index ea55546504..a78d3c45a6 100644 --- a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx +++ b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx @@ -25,14 +25,13 @@ import { useDatastoreList } from "lib/hooks/useDatabaseList"; import { Context } from "shared/Context"; import { search } from "shared/search"; import { readableDate } from "shared/string_utils"; -import engine from "assets/computer-chip.svg"; import databaseGrad from "assets/database-grad.svg"; import grid from "assets/grid.png"; import list from "assets/list.png"; import notFound from "assets/not-found.png"; import time from "assets/time.png"; -import { getDatastoreIcon, getEngineIcon } from "./icons"; +import { DATASTORE_ENGINE_POSTGRES, DATASTORE_ENGINE_REDIS } from "./constants"; import EngineTag from "./tags/EngineTag"; const DatabaseDashboard: React.FC = () => { @@ -40,12 +39,9 @@ const DatabaseDashboard: React.FC = () => { const [searchValue, setSearchValue] = useState(""); const [view, setView] = useState<"grid" | "list">("grid"); - const [typeFilter, setTypeFilter] = useState<"all" | "RDS" | "ELASTICACHE">( + const [typeFilter, setTypeFilter] = useState<"all" | "POSTGRES" | "REDIS">( "all" ); - const [engineFilter, setEngineFilter] = useState< - "all" | "POSTGRES" | "AURORA-POSTGRES" | "REDIS" - >("all"); const history = useHistory(); const { datastores, isLoading } = useDatastoreList({ @@ -65,21 +61,12 @@ const DatabaseDashboard: React.FC = () => { if (typeFilter === "all") { return true; } - return datastore.type === typeFilter; + return datastore.template.highLevelType.name === typeFilter; } ); - const filteredByEngine = filteredByDatastoreType.filter( - (datastore: ClientDatastore) => { - if (engineFilter === "all") { - return true; - } - return datastore.template.engine.name === engineFilter; - } - ); - - return filteredByEngine; - }, [datastores, searchValue, typeFilter, engineFilter]); + return filteredByDatastoreType; + }, [datastores, searchValue, typeFilter]); const renderContents = (): JSX.Element => { if (!currentProject?.db_enabled) { @@ -134,79 +121,40 @@ const DatabaseDashboard: React.FC = () => { return ( <> - { if ( value === "all" || value === "POSTGRES" || - value === "AURORA-POSTGRES" || value === "REDIS" ) { - setEngineFilter(value); + setTypeFilter(value); } }} prefix={ - + - Engine + Type } + width="350px" /> - + {