synthetics - waterfall chart - support wildcard search

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/common/network_data/data_formatting.ts

@@ -98,11 +98,21 @@ export const getQueryMatcher = (query?: string): ItemMatcher => {
     return (item: NetworkEvent) => true;
   }
 
-  const regExp = new RegExp(query, 'i');
-
-  return (item: NetworkEvent) => {
-    return (item.url?.search(regExp) ?? -1) > -1;
-  };
+  /* RegExp below taken from: https://github.com/sindresorhus/escape-string-regexp/blob/main/index.js
+   * First, escape all special character to use an exact string match
+   * Next, replace escaped '*' with '.' to match any character and support wildcard search */
+  const formattedQuery = query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+  const wildcardQuery = formattedQuery.replaceAll('\\*', '.');
+
+  try {
+    const regExp = new RegExp(wildcardQuery, 'i');
+
+    return (item: NetworkEvent) => {
+      return (item.url?.search(regExp) ?? -1) > -1;
+    };
+  } catch (e) {
+    // ignore invalid regex
+  }
 };
 
 export const getFilterMatcher = (filters: string[] | undefined): ItemMatcher => {