fix #20 search query parameters are now updated

from the search page
JackBister · Jan 28, 2021 · 3c0dcc3 · 3c0dcc3
1 parent 0be0767
commit 3c0dcc3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/web/static/src/createSearchUrl.ts b/web/static/src/createSearchUrl.ts
@@ -20,31 +20,37 @@ export const createSearchUrl = (
   searchString: string,
   timeSelection: TimeSelection
 ) => {
-  const queryEncoded = encodeURIComponent(searchString);
-  const tsEncoded = createTSUrl(timeSelection);
-
-  return `/search?query=${queryEncoded}${tsEncoded}`;
+  const qp = createSearchQueryParams(searchString, timeSelection);
+  const qpString = Object.keys(qp)
+    .map((k) => ({ key: k, value: qp[k] }))
+    .reduce((prev, { key, value }) => (prev += `&${key}=${value}`), "");
+  return `search?${qpString}`;
 };
 
-const createTSUrl = (timeSelection: TimeSelection) => {
+export const createSearchQueryParams = (
+  searchString: string,
+  timeSelection: TimeSelection
+) => {
+  const ret: { [key: string]: string } = {};
+  ret["query"] = encodeURIComponent(searchString);
   if (timeSelection.relativeTime) {
-    return `&relativeTime=${timeSelection.relativeTime}`;
+    ret["relativeTime"] = timeSelection.relativeTime;
+    return ret;
   }
-  let url = "";
   if (timeSelection.startTime) {
-    url += `&startTime=${timeSelection.startTime.toISOString()}`;
+    ret["startTime"] = timeSelection.startTime.toISOString();
   }
   if (timeSelection.endTime) {
-    url += `&endTime=${timeSelection.endTime.toISOString()}`;
+    ret["endTime"] = timeSelection.endTime.toISOString();
   }
 
   if (
     !timeSelection.relativeTime &&
     !timeSelection.startTime &&
     !timeSelection.endTime
   ) {
-    url += "&relativeTime=ALL";
+    ret["relativeTime"] = "ALL";
   }
 
-  return url;
+  return ret;
 };
diff --git a/web/static/src/pages/SearchPage.tsx b/web/static/src/pages/SearchPage.tsx
@@ -40,6 +40,7 @@ import { SearchInput } from "../components/SearchInput";
 import { FieldValueTable } from "../components/FieldValueTable";
 import { EventTable } from "../components/EventTable";
 import { FieldTable } from "../components/FieldTable";
+import { createSearchQueryParams } from "../createSearchUrl";
 
 const EVENTS_PER_PAGE = 25;
 const TOP_FIELDS_COUNT = 15;
@@ -160,7 +161,9 @@ export class SearchPageComponent extends Component<
     let doSearch = false;
     let newState: Partial<SearchStateStruct> = {};
     if (queryParams.has("query")) {
-      newState.searchString = queryParams.get("query") || undefined;
+      newState.searchString = decodeURIComponent(
+        queryParams.get("query") || ""
+      );
       doSearch = true;
     }
     if (queryParams.has("relativeTime")) {
@@ -452,6 +455,15 @@ export class SearchPageComponent extends Component<
     this.setState({
       state: SearchState.WAITING_FOR_SEARCH,
     });
+    try {
+      const qp = createSearchQueryParams(
+        this.state.searchString,
+        this.state.selectedTime
+      );
+      this.setQueryParams(qp);
+    } catch (e) {
+      console.warn("failed to set new query params when starting search", e);
+    }
     try {
       const startJobResult = await this.props.startJob(
         this.state.searchString,
@@ -471,9 +483,7 @@ export class SearchPageComponent extends Component<
         numMatched: 0,
         currentPageIndex: 0,
       });
-      const queryParams = this.props.getQueryParams();
-      queryParams.set("jobId", startJobResult.id.toString());
-      this.props.setQueryParams(queryParams);
+      this.setQueryParams({ jobId: startJobResult.id.toString() });
     } catch (e) {
       console.log(e);
       this.setState({
@@ -489,6 +499,14 @@ export class SearchPageComponent extends Component<
     });
   }
 
+  private setQueryParams(qp: { [key: string]: string }) {
+    const queryParams = this.props.getQueryParams();
+    for (const k of Object.keys(qp)) {
+      queryParams.set(k, qp[k]);
+    }
+    this.props.setQueryParams(queryParams);
+  }
+
   private async poll(id: number) {
     if (this.state.state !== SearchState.SEARCHED_POLLING) {
       throw new Error(