Merge 87970b5 into 3c284d4

easyops-cn · Jun 1, 2020 · 7b50d2f · 7b50d2f
2 parents 3c284d4 + 87970b5
commit 7b50d2f
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 10 deletions.
diff --git a/src/panel/components/EvaluationsPanel.spec.tsx b/src/panel/components/EvaluationsPanel.spec.tsx
@@ -7,6 +7,7 @@ import { PropItem } from "./PropList";
 
 jest.mock("../libs/EvaluationsContext");
 const setEvaluations = jest.fn();
+const savePreserveLogs = jest.fn();
 (useEvaluationsContext as jest.Mock).mockReturnValue({
   evaluations: [
     {
@@ -29,6 +30,7 @@ const setEvaluations = jest.fn();
     },
   ],
   setEvaluations,
+  savePreserveLogs,
 });
 
 describe("EvaluationsPanel", () => {
@@ -44,7 +46,7 @@ describe("EvaluationsPanel", () => {
   it("should toggle string-wrap", () => {
     const wrapper = shallow(<EvaluationsPanel />);
     expect(wrapper.hasClass("string-wrap")).toBe(false);
-    wrapper.find(Switch).invoke("onChange")({
+    wrapper.find("[label='String Wrap']").invoke("onChange")({
       target: {
         checked: true,
       },
@@ -58,6 +60,16 @@ describe("EvaluationsPanel", () => {
     expect(setEvaluations).toBeCalledWith([]);
   });
 
+  it("should toggle preserveLogs", () => {
+    const wrapper = shallow(<EvaluationsPanel />);
+    wrapper.find("[label='Preserve logs']").invoke("onChange")({
+      target: {
+        checked: true,
+      },
+    } as any);
+    expect(savePreserveLogs).toBeCalledWith(true);
+  });
+
   it("should handle filter", () => {
     const wrapper = shallow(<EvaluationsPanel />);
     wrapper.find(InputGroup).invoke("onChange")({

diff --git a/src/panel/components/EvaluationsPanel.tsx b/src/panel/components/EvaluationsPanel.tsx
@@ -10,9 +10,15 @@ import classNames from "classnames";
 import { PanelSelector } from "./PanelSelector";
 import { useEvaluationsContext } from "../libs/EvaluationsContext";
 import { PropList, PropItem } from "./PropList";
+import { Storage } from "../libs/Storage";
 
 export function EvaluationsPanel(): React.ReactElement {
-  const { evaluations, setEvaluations } = useEvaluationsContext();
+  const {
+    evaluations,
+    setEvaluations,
+    preserveLogs,
+    savePreserveLogs,
+  } = useEvaluationsContext();
   const [stringWrap, setStringWrap] = React.useState(false);
   const [q, setQ] = React.useState<string>();
 
@@ -43,6 +49,17 @@ export function EvaluationsPanel(): React.ReactElement {
     []
   );
 
+  const handleToggleLogs = React.useCallback(
+    (event: React.FormEvent<HTMLInputElement>) => {
+      savePreserveLogs((event.target as HTMLInputElement).checked);
+      // Storage.setItem(
+      //   "preserveLogs",
+      //   (event.target as HTMLInputElement).checked
+      // );
+    },
+    []
+  );
+
   return (
     <div
       className={classNames("panel evaluations-panel", {
@@ -65,6 +82,11 @@ export function EvaluationsPanel(): React.ReactElement {
           />
         </div>
         <div className="toolbar-group">
+          <Switch
+            checked={preserveLogs}
+            label="Preserve logs"
+            onChange={handleToggleLogs}
+          />
           <Switch
             checked={stringWrap}
             label="String Wrap"

diff --git a/src/panel/components/Layout.spec.tsx b/src/panel/components/Layout.spec.tsx
@@ -11,8 +11,17 @@ import { useEvaluationsContext } from "../libs/EvaluationsContext";
 import { useTransformationsContext } from "../libs/TransformationsContext";
 
 function MockEvaluationsPanel(): React.ReactElement {
-  const { evaluations } = useEvaluationsContext();
-  return <div>EvaluationsPanel ({evaluations.length})</div>;
+  const { evaluations, savePreserveLogs } = useEvaluationsContext();
+  return (
+    <div
+      onChange={(e) => {
+        savePreserveLogs(e.target.value);
+      }}
+      id="EvaluationsPanel"
+    >
+      EvaluationsPanel ({evaluations.length})
+    </div>
+  );
 }
 
 function MockTransformationsPanel(): React.ReactElement {
@@ -126,4 +135,42 @@ describe("Layout", () => {
     expect(wrapper.text()).toBe("TransformationsPanel (1)");
     wrapper.unmount();
   });
+
+  it.each([
+    [undefined, 1],
+    [false, 0],
+  ])("locationChange should work", async (value, length) => {
+    storageGetItem.mockReturnValue("Evaluations");
+    const wrapper = mount(<Layout />);
+    await act(async () => {
+      window.postMessage(
+        {
+          source: MESSAGE_SOURCE_HOOK,
+          payload: {
+            type: "evaluation",
+            payload: "good",
+          },
+        },
+        location.origin
+      );
+      await new Promise((resolve) => setTimeout(resolve));
+    });
+    wrapper.find("#EvaluationsPanel").first().invoke("onChange")({
+      target: { value },
+    });
+    await act(async () => {
+      window.postMessage(
+        {
+          source: MESSAGE_SOURCE_HOOK,
+          payload: {
+            type: "locationChange",
+          },
+        },
+        location.origin
+      );
+      await new Promise((resolve) => setTimeout(resolve));
+    });
+    expect(wrapper.text()).toBe(`EvaluationsPanel (${length})`);
+    wrapper.unmount();
+  });
 });
diff --git a/src/panel/components/Layout.tsx b/src/panel/components/Layout.tsx
@@ -21,6 +21,7 @@ export function Layout(): React.ReactElement {
     Storage.getItem("selectedPanel") ?? "Bricks"
   );
   const [evaluations, setEvaluations] = React.useState<Evaluation[]>([]);
+  const [preserveLogs, savePreserveLogs] = React.useState<boolean>(true);
   const [transformations, setTransformations] = React.useState<
     Transformation[]
   >([]);
@@ -33,11 +34,17 @@ export function Layout(): React.ReactElement {
         ((data = event.data.payload), data?.type === "evaluation")
       ) {
         setEvaluations((prev) => prev.concat(hydrate(data.payload, data.repo)));
+      } else if (
+        event.data?.source === MESSAGE_SOURCE_HOOK &&
+        ((data = event.data.payload), data?.type === "locationChange") &&
+        !(preserveLogs ?? true)
+      ) {
+        setEvaluations([]);
       }
     }
     window.addEventListener("message", onMessage);
     return (): void => window.removeEventListener("message", onMessage);
-  }, []);
+  }, [preserveLogs]);
 
   React.useEffect(() => {
     function onMessage(event: MessageEvent): void {
@@ -49,11 +56,17 @@ export function Layout(): React.ReactElement {
         setTransformations((prev) =>
           prev.concat(hydrate(data.payload, data.repo))
         );
+      } else if (
+        event.data?.source === MESSAGE_SOURCE_HOOK &&
+        ((data = event.data.payload), data?.type === "locationChange") &&
+        !(preserveLogs ?? true)
+      ) {
+        setTransformations([]);
       }
     }
     window.addEventListener("message", onMessage);
     return (): void => window.removeEventListener("message", onMessage);
-  }, []);
+  }, [preserveLogs]);
 
   React.useEffect(() => {
     Storage.setItem("selectedPanel", selectedPanel);
@@ -73,13 +86,23 @@ export function Layout(): React.ReactElement {
         >
           {selectedPanel === "Evaluations" ? (
             <EvaluationsContext.Provider
-              value={{ evaluations, setEvaluations }}
+              value={{
+                evaluations,
+                setEvaluations,
+                preserveLogs,
+                savePreserveLogs,
+              }}
             >
               <EvaluationsPanel />
             </EvaluationsContext.Provider>
           ) : selectedPanel === "Transformations" ? (
             <TransformationsContext.Provider
-              value={{ transformations, setTransformations }}
+              value={{
+                transformations,
+                setTransformations,
+                preserveLogs,
+                savePreserveLogs,
+              }}
             >
               <TransformationsPanel />
             </TransformationsContext.Provider>

diff --git a/src/panel/components/TransformationsPanel.spec.tsx b/src/panel/components/TransformationsPanel.spec.tsx
@@ -6,6 +6,7 @@ import { useTransformationsContext } from "../libs/TransformationsContext";
 
 jest.mock("../libs/TransformationsContext");
 const setTransformations = jest.fn();
+const savePreserveLogs = jest.fn();
 (useTransformationsContext as jest.Mock).mockReturnValue({
   transformations: [
     {
@@ -21,6 +22,7 @@ const setTransformations = jest.fn();
     },
   ],
   setTransformations,
+  savePreserveLogs,
 });
 
 describe("TransformationsPanel", () => {
@@ -36,14 +38,24 @@ describe("TransformationsPanel", () => {
   it("should toggle string-wrap", () => {
     const wrapper = shallow(<TransformationsPanel />);
     expect(wrapper.hasClass("string-wrap")).toBe(false);
-    wrapper.find(Switch).invoke("onChange")({
+    wrapper.find("[label='String Wrap']").invoke("onChange")({
       target: {
         checked: true,
       },
     } as any);
     expect(wrapper.hasClass("string-wrap")).toBe(true);
   });
 
+  it("should toggle preserveLogs", () => {
+    const wrapper = shallow(<TransformationsPanel />);
+    wrapper.find("[label='Preserve logs']").invoke("onChange")({
+      target: {
+        checked: true,
+      },
+    } as any);
+    expect(savePreserveLogs).toBeCalledWith(true);
+  });
+
   it("should handle clear", () => {
     const wrapper = shallow(<TransformationsPanel />);
     wrapper.find(Button).invoke("onClick")(null);

diff --git a/src/panel/components/TransformationsPanel.tsx b/src/panel/components/TransformationsPanel.tsx
@@ -4,9 +4,15 @@ import classNames from "classnames";
 import { PanelSelector } from "./PanelSelector";
 import { useTransformationsContext } from "../libs/TransformationsContext";
 import { PropItem } from "./PropList";
+import { Storage } from "../libs/Storage";
 
 export function TransformationsPanel(): React.ReactElement {
-  const { transformations, setTransformations } = useTransformationsContext();
+  const {
+    transformations,
+    setTransformations,
+    preserveLogs,
+    savePreserveLogs,
+  } = useTransformationsContext();
   const [stringWrap, setStringWrap] = React.useState(false);
 
   const handleClear = React.useCallback(() => {
@@ -20,6 +26,17 @@ export function TransformationsPanel(): React.ReactElement {
     []
   );
 
+  const handleToggleLogs = React.useCallback(
+    (event: React.FormEvent<HTMLInputElement>) => {
+      savePreserveLogs((event.target as HTMLInputElement).checked);
+      // Storage.setItem(
+      //   "preserveLogs",
+      //   (event.target as HTMLInputElement).checked
+      // );
+    },
+    []
+  );
+
   return (
     <div
       className={classNames("panel transformations-panel", {
@@ -36,6 +53,11 @@ export function TransformationsPanel(): React.ReactElement {
           </ButtonGroup>
         </div>
         <div className="toolbar-group">
+          <Switch
+            checked={preserveLogs}
+            label="Preserve logs"
+            onChange={handleToggleLogs}
+          />
           <Switch
             checked={stringWrap}
             label="String Wrap"

diff --git a/src/panel/libs/EvaluationsContext.ts b/src/panel/libs/EvaluationsContext.ts
@@ -4,6 +4,8 @@ import { Evaluation } from "../../shared/interfaces";
 export interface ContextOfEvaluations {
   evaluations?: Evaluation[];
   setEvaluations?: React.Dispatch<React.SetStateAction<Evaluation[]>>;
+  preserveLogs?: boolean;
+  savePreserveLogs?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const EvaluationsContext = React.createContext<ContextOfEvaluations>({});

diff --git a/src/panel/libs/TransformationsContext.ts b/src/panel/libs/TransformationsContext.ts
@@ -4,6 +4,8 @@ import { Transformation } from "../../shared/interfaces";
 export interface ContextOfTransformations {
   transformations?: Transformation[];
   setTransformations?: React.Dispatch<React.SetStateAction<Transformation[]>>;
+  preserveLogs?: boolean;
+  savePreserveLogs?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const TransformationsContext = React.createContext<