(ui): add filterBySearchQuery function, add tests for planView.tsx

Release note: None
cockroachdb · Jan 18, 2022 · 156ff11 · 156ff11
1 parent c24cbb1
commit 156ff11
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 36 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.spec.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.spec.tsx
@@ -17,6 +17,8 @@ import {
   flattenTreeAttributes,
   flattenAttributes,
   standardizeKey,
+  planNodeToString,
+  planNodeAttrsToString,
 } from "./planView";
 import IAttr = cockroach.sql.ExplainTreePlanNode.IAttr;
 
@@ -260,4 +262,94 @@ describe("planView", () => {
       assert.equal(standardizeKey("(anti) hello world"), "helloWorld");
     });
   });
+
+  describe("planNodeAttrsToString", () => {
+    it("should convert an array of FlatPlanNodeAttribute[] into a string", () => {
+      const testNodeAttrs: FlatPlanNodeAttribute[] = [
+        {
+          key: "Into",
+          values: ["users(id, city, name, address, credit_card)"],
+          warn: false,
+        },
+        {
+          key: "Size",
+          values: ["5 columns, 5 rows"],
+          warn: false,
+        },
+      ];
+
+      const expectedString =
+        "Into users(id, city, name, address, credit_card) Size 5 columns, 3 rows";
+
+      assert.deepEqual(planNodeAttrsToString(testNodeAttrs), expectedString);
+    });
+  });
+
+  describe("planNodeToString", () => {
+    it("should recursively convert a FlatPlanNode into a string.", () => {
+      const testPlanNode: FlatPlanNode = {
+        name: "insert fast path",
+        attrs: [
+          {
+            key: "Into",
+            values: ["users(id, city, name, address, credit_card)"],
+            warn: false,
+          },
+          {
+            key: "Size",
+            values: ["5 columns, 5 rows"],
+            warn: false,
+          },
+        ],
+        children: null,
+      };
+
+      const expectedString =
+        "insert fast path Into users(id, city, name, address, credit_card) Size 5 columns, 5 rows";
+
+      assert.deepEqual(planNodeToString(testPlanNode), expectedString);
+    });
+
+    it("should recursively convert a FlatPlanNode (with children) into a string.", () => {
+      const testPlanNode: FlatPlanNode = {
+        name: "render",
+        attrs: [],
+        children: [
+          {
+            name: "group (scalar)",
+            attrs: [],
+            children: [
+              {
+                name: "filter",
+                attrs: [
+                  {
+                    key: "filter",
+                    values: ["variable = _"],
+                    warn: false,
+                  },
+                ],
+                children: [
+                  {
+                    name: "virtual table",
+                    attrs: [
+                      {
+                        key: "table",
+                        values: ["cluster_settings@primary"],
+                        warn: false,
+                      },
+                    ],
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const expectedString =
+        "render  group (scalar)  filter filter variable = _ virtual table table cluster_settings@primary";
+      assert.deepEqual(planNodeToString(testPlanNode), expectedString);
+    });
+  });
 });
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.tsx
@@ -55,16 +55,23 @@ function warnForAttribute(attr: IAttr): boolean {
   }
   return false;
 }
-// planNodeAttributesToString converts a FlatPlanNodeAttribute into a string.
-export function planNodeAttributesToString(
-  attrs: FlatPlanNodeAttribute[],
-): string {
-  let str = "";
-
-  attrs.forEach(function(attr) {
-    str = str.concat(attr.key, " ", attr.values.join(" "), " ");
-  });
 
+// planNodeAttrsToString converts an array of FlatPlanNodeAttribute[] into a string.
+export function planNodeAttrsToString(attrs: FlatPlanNodeAttribute[]): string {
+  attrs.map(attr => `${attr.key} ${attr.values.join(" ")}`).join(" ");
+  return attrs.map(attr => `${attr.key} ${attr.values.join(" ")}`).join(" ");
+}
+
+// planNodeAttributesToString recursively converts a FlatPlanNode into a string.
+export function planNodeToString(plan: FlatPlanNode): string {
+  const str = `${plan.name} ${planNodeAttrsToString(plan.attrs)}`;
+
+  if (plan.children.length > 0) {
+    const str2 = plan.children
+      .map(child => `${str} ${planNodeToString(child)}`)
+      .join(" ");
+    return str2;
+  }
   return str;
 }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -76,10 +76,7 @@ import {
 } from "../timeScaleDropdown";
 
 import { commonStyles } from "../common";
-import {
-  flattenTreeAttributes,
-  planNodeAttributesToString,
-} from "../statementDetails";
+import { flattenTreeAttributes, planNodeToString } from "../statementDetails";
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
 
@@ -150,6 +147,23 @@ function statementsRequestFromProps(
   });
 }
 
+// filterBySearchQuery returns true if a search query matches the statement.
+function filterBySearchQuery(
+  statement: AggregateStatistics,
+  search: string,
+): boolean {
+  const label = statement.label.toLowerCase();
+  const tree = flattenTreeAttributes(
+    statement.stats.sensitive_info &&
+      statement.stats.sensitive_info.most_recent_plan_description,
+  );
+  const plan = planNodeToString(tree).toLowerCase();
+  const matchString = `${label}|${plan}`;
+  return search
+    .split(" ")
+    .every(val => matchString.includes(val.toLowerCase()));
+}
+
 export class StatementsPage extends React.Component<
   StatementsPageProps,
   StatementsPageState
@@ -413,29 +427,7 @@ export class StatementsPage extends React.Component<
       )
       .filter(statement => (filters.fullScan ? statement.fullScan : true))
       .filter(statement =>
-        search
-          ? search.split(" ").every(val =>
-              statement.label
-                .toLowerCase()
-                .concat(
-                  flattenTreeAttributes(
-                    statement.stats.sensitive_info &&
-                      statement.stats.sensitive_info
-                        .most_recent_plan_description,
-                  ).name.toLowerCase(),
-                  " ",
-                  planNodeAttributesToString(
-                    flattenTreeAttributes(
-                      statement.stats.sensitive_info &&
-                        statement.stats.sensitive_info
-                          .most_recent_plan_description,
-                    ).attrs,
-                  ).toLowerCase(),
-                  " ",
-                )
-                .includes(val.toLowerCase()),
-            )
-          : true,
+        search ? filterBySearchQuery(statement, search) : true,
       )
       .filter(
         statement =>