UX improvement. Fetch props list.

web/frontend/src/components/Filter.jsx

@@ -1,12 +1,10 @@
-import { Box, Typography, useTheme } from "@mui/material";
-import { Button } from "@mui/material";
-import { tokens } from "../theme";
-import React, { useEffect, useState } from "react";
-import { QueryBuilderMaterial } from "@react-querybuilder/material";
-import { QueryBuilder, formatQuery, parseCEL } from "react-querybuilder";
+import {Box, useTheme} from "@mui/material";
+import {tokens} from "../theme";
+import React, {useEffect, useState} from "react";
+import {QueryBuilderMaterial} from "@react-querybuilder/material";
+import {formatQuery, parseCEL, QueryBuilder} from "react-querybuilder";
 import "react-querybuilder/dist/query-builder.css";
-import { BACKEND_URL } from "../AppConfig";
-import { useSessionStorage } from "@uidotdev/usehooks";
+import {useSessionStorage} from "@uidotdev/usehooks";
 
 const operators = [
   { name: "=", label: "=" },
@@ -60,7 +58,7 @@ const Filter = () => {
       }
     });
     console.log("updating filter component state");
-  }, []);
+  }, [globalProperties]);
 
   const updateFilter = (q) => {
     if (q == "") {

web/frontend/src/scenes/dashboard/index.jsx

@@ -38,6 +38,14 @@ const Dashboard = () => {
     }
   );
 
+  const fetchGlobalProperties = async () => {
+    const response = await fetch(BACKEND_URL + "/properties");
+    let data = await response.json();
+    let properties = data.map((prop) => prop.property);
+    setGlobalProperties(properties);
+  };
+
+
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
 
@@ -63,6 +71,7 @@ const Dashboard = () => {
     console.log("loading the dashboard");
 
     fetchStatistics();
+    fetchGlobalProperties();
   }, [filter]);
 
   const handleClick = () => {