support direct table filter link

ui/src/Hooks/TableHooks.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+export const useTableFilters = () => {
+  const [state, setState] = useState({});
+
+  // filter table was changed when the state (table properties) was changed
+  useEffect(() => {
+    const searchParams = new window.URLSearchParams(window.location.search);
+    Object.keys(state).map((key) => {
+      searchParams.set(key, state[key]);
+    });
+
+    // We don't want keep table action in browser back/forward history
+    window.history.replaceState(
+      null,
+      null,
+      decodeURIComponent(`?${searchParams.toString()}`)
+    );
+  }, [state]);
+
+  const handleChange = (filters = []) => {
+    const newFilters = {};
+    filters.forEach((filter) => (newFilters[filter.key] = filter.value));
+    Object.assign(state, newFilters);
+    setState({ ...state });
+  };
+  return [handleChange];
+};

ui/src/components/Dashboard/FilterBar.js

@@ -150,7 +150,7 @@ const FilterBar = ({
       }
     });
 
-    updateFilters(filters);
+    setFilters(filters);
     if (resource) {
       setResource(resource);
     }

ui/src/components/Dashboard/Index.js

@@ -41,7 +41,6 @@ const DashboardIndex = ({
   filters,
 }) => {
   const classes = useStyles();
-
   /**
    * Will clear selected filter and show main page
    */
@@ -73,8 +72,7 @@ const DashboardIndex = ({
       <FilterBar />
       <StatisticsBar />
       <ResourcesList />
-      {!currentResource && <ResourcesChart />}
-      {currentResource && <ResourceTable />}
+      {currentResource ? <ResourceTable /> : <ResourcesChart />}
     </Fragment>
   );
 };

ui/src/components/Dashboard/ResourceTable.js

@@ -6,6 +6,8 @@ import MUIDataTable from "mui-datatables";
 import TextUtils from "utils/Text";
 import TagsDialog from "../Dialog/Tags";
 import ReportProblemIcon from "@material-ui/icons/ReportProblem";
+import { getHistory } from "../../utils/History";
+import { useTableFilters } from "../../Hooks/TableHooks";
 
 import {
   makeStyles,
@@ -54,13 +56,23 @@ const ResourceTable = ({
   const [headers, setHeaders] = useState([]);
   const [errorMessage, setErrorMessage] = useState(false);
   const [hasError, setHasError] = useState(false);
-
   const classes = useStyles();
+  const [setTableFilters] = useTableFilters({});
+  const [tableOptions, setTableOptions] = useState({});
 
-  const tableOptions = {
-    selectableRows: "none",
-    responsive: "standard",
-  };
+  // setting table configuration on first load
+  useEffect(() => {
+    setTableOptions({
+      page: parseInt(getHistory("page", 0)),
+      searchText: getHistory("search", ""),
+      sortOrder: {
+        name: getHistory("sortColumn", ""),
+        direction: getHistory("direction", "desc"),
+      },
+      selectableRows: "none",
+      responsive: "standard",
+    });
+  }, []);
 
   /**
    * format table cell by type
@@ -191,6 +203,26 @@ const ResourceTable = ({
             data={currentResourceData}
             columns={headers}
             options={Object.assign(tableOptions, {
+              onSearchChange: (searchText) => {
+                setTableFilters([
+                  {
+                    key: "search",
+                    value: searchText ? searchText : "",
+                  },
+                ]);
+              },
+              onColumnSortChange: (changedColumn, direction) => {
+                setTableFilters([
+                  { key: "sortColumn", value: changedColumn },
+                  { key: "direction", value: direction },
+                ]);
+              },
+              onChangePage: (currentPage) => {
+                setTableFilters([{ key: "page", value: currentPage }]);
+              },
+              onChangeRowsPerPage: (numberOfRows) => {
+                setTableFilters([{ key: "rows", value: numberOfRows }]);
+              },
               downloadOptions: {
                 filename: `${currentResource}.csv`,
               },

ui/src/utils/History.js

@@ -62,10 +62,15 @@ export const setHistory = (historyParams = {}) => {
 /**
  *
  * @param {string} query params name from url
+ * @param {any} defaultValue return default value in case the query not exists
  * @returns {string} Param value from url
  */
-export const getHistory = (query) => {
+export const getHistory = (query, defaultValue = null) => {
   const searchParams = new window.URLSearchParams(window.location.search);
   const searchQuery = searchParams.get(query);
-  return searchQuery;
+  if (searchQuery) {
+    return searchQuery;
+  } else {
+    return defaultValue;
+  }
 };