feat: filter expressions in evaluations page

easyops-cn · Apr 27, 2020 · 85c20d4 · 85c20d4
1 parent b99c47c
commit 85c20d4
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/src/panel/components/EvaluationsPanel.spec.tsx b/src/panel/components/EvaluationsPanel.spec.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { Button } from "@blueprintjs/core";
+import { Button, InputGroup } from "@blueprintjs/core";
 import { EvaluationsPanel } from "./EvaluationsPanel";
 import { useEvaluationsContext } from "../libs/EvaluationsContext";
+import { PropItem } from "./PropList";
 
 jest.mock("../libs/EvaluationsContext");
 const setEvaluations = jest.fn();
@@ -17,6 +18,15 @@ const setEvaluations = jest.fn();
         },
       },
     },
+    {
+      raw: "<% DATA.quality %>",
+      result: "better",
+      context: {
+        EVENT: {
+          detail: "better",
+        },
+      },
+    },
   ],
   setEvaluations,
 });
@@ -28,12 +38,25 @@ describe("EvaluationsPanel", () => {
 
   it("should work", () => {
     const wrapper = shallow(<EvaluationsPanel />);
-    expect(wrapper.find("tbody").find("tr").length).toBe(1);
+    expect(wrapper.find("tbody").find("tr").length).toBe(2);
   });
 
   it("should handle clear", () => {
     const wrapper = shallow(<EvaluationsPanel />);
     wrapper.find(Button).invoke("onClick")(null);
-    expect(setEvaluations).toBeCalled();
+    expect(setEvaluations).toBeCalledWith([]);
+  });
+
+  it("should handle filter", () => {
+    const wrapper = shallow(<EvaluationsPanel />);
+    wrapper.find(InputGroup).invoke("onChange")({
+      target: {
+        value: "detail",
+      },
+    } as any);
+    expect(wrapper.find("tbody").find("tr").length).toBe(1);
+    expect(wrapper.find(PropItem).at(0).prop("propValue")).toBe(
+      "<% EVENT.detail %>"
+    );
   });
 });
diff --git a/src/panel/components/EvaluationsPanel.tsx b/src/panel/components/EvaluationsPanel.tsx
@@ -1,20 +1,45 @@
 import React from "react";
-import { Button, Tooltip, ButtonGroup } from "@blueprintjs/core";
+import { Button, Tooltip, ButtonGroup, InputGroup } from "@blueprintjs/core";
 import { PanelSelector } from "./PanelSelector";
 import { useEvaluationsContext } from "../libs/EvaluationsContext";
 import { PropList, PropItem } from "./PropList";
 
 export function EvaluationsPanel(): React.ReactElement {
   const { evaluations, setEvaluations } = useEvaluationsContext();
+  const [q, setQ] = React.useState<string>();
 
   const handleClear = React.useCallback(() => {
     setEvaluations([]);
   }, [setEvaluations]);
 
+  const handleFilterChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setQ(event.target.value);
+    },
+    []
+  );
+
+  const filteredEvaluations = React.useMemo(() => {
+    if (!q) {
+      return evaluations;
+    }
+    return evaluations.filter((item) =>
+      item.raw.toLocaleLowerCase().includes(q.toLocaleLowerCase())
+    );
+  }, [evaluations, q]);
+
   return (
     <div className="panel evaluations-panel">
       <div className="evaluations-toolbar">
-        <PanelSelector />
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <PanelSelector />
+          <InputGroup
+            leftIcon="filter"
+            onChange={handleFilterChange}
+            placeholder="Filter expressions..."
+            value={q}
+          />
+        </div>
         <ButtonGroup>
           <Tooltip content="Clear" hoverOpenDelay={300}>
             <Button icon="disable" minimal onClick={handleClear} />
@@ -32,7 +57,7 @@ export function EvaluationsPanel(): React.ReactElement {
               </tr>
             </thead>
             <tbody className="source-code">
-              {evaluations.map((item, key) => (
+              {filteredEvaluations.map((item, key) => (
                 <tr key={key}>
                   <td>
                     <PropItem propValue={item.raw} standalone />