feat(): support limit log number

easyops-cn · Nov 18, 2022 · 648e4b2 · 648e4b2
1 parent 059424d
commit 648e4b2
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 17 deletions.
diff --git a/src/panel/components/EvaluationsPanel.spec.tsx b/src/panel/components/EvaluationsPanel.spec.tsx
@@ -98,7 +98,7 @@ describe("EvaluationsPanel", () => {
 
   it("should handle filter", () => {
     const wrapper = shallow(<EvaluationsPanel />);
-    wrapper.find(InputGroup).invoke("onChange")({
+    wrapper.find(InputGroup).at(0).invoke("onChange")({
       target: {
         value: "detail",
       },

diff --git a/src/panel/components/EvaluationsPanel.tsx b/src/panel/components/EvaluationsPanel.tsx
@@ -28,6 +28,8 @@ export function EvaluationsPanel(): React.ReactElement {
     setEvaluations,
     preserveLogs,
     savePreserveLogs,
+    logNumber,
+    setLogNumber,
   } = useEvaluationsContext();
   const [stringWrap, setStringWrap] = React.useState(false);
   const [q, setQ] = React.useState<string>();
@@ -146,6 +148,21 @@ export function EvaluationsPanel(): React.ReactElement {
           />
         </div>
         <div className="toolbar-group">
+          <div className="toolbar--group-log-number-input">
+            <label>Log number:</label>
+            <InputGroup
+              type="number"
+              value={String(logNumber)}
+              style={{
+                width: 100,
+              }}
+              onChange={(e) => {
+                LocalJsonStorage.setItem("logNumber", Number(e.target.value));
+                setPage(1);
+                setLogNumber(Number(e.target.value) ?? 0);
+              }}
+            />
+          </div>
           <Switch
             checked={preserveLogs}
             label="Preserve logs"

diff --git a/src/panel/components/Layout.tsx b/src/panel/components/Layout.tsx
@@ -41,6 +41,9 @@ export function Layout(): React.ReactElement {
   const [transformationsMap, setTransformationsMap] = React.useState<
     Record<number, Transformation[]>
   >({ 0: [] });
+  const [logNumber, setLogNumber] = React.useState(
+    Storage.getItem("logNumber") ?? 50
+  );
   const [preserveLogs, savePreserveLogs] = React.useState(false);
   const [inspectFrameIndex, setInspectFrameIndex] = React.useState<number>(
     () => Storage.getItem("inspectFrameIndex") ?? 0
@@ -219,21 +222,37 @@ export function Layout(): React.ReactElement {
     setTransformationsByFrameId,
   ]);
 
+  const spliceListLimit = (list: Array<any>, n: number): Array<any> => {
+    const spliceNumber = list.length - n;
+    if (list.length > n) {
+      list.splice(0, spliceNumber);
+    }
+    return list;
+  };
+
   React.useEffect(() => {
     function onMessage(event: MessageEvent): void {
+      if (
+        selectedPanel !== "Evaluations" ||
+        getFrameIdByFrameIndex(inspectFrameIndex) !== event.data?.frameId
+      )
+        return;
       let data: DehydratedPayload;
       if (
         event.data?.source === MESSAGE_SOURCE_HOOK &&
         ((data = event.data.payload), data?.type === "evaluation")
       ) {
         setEvaluationsByFrameId(event.data.frameId, (prev) =>
-          (prev ?? []).concat({
-            hydrated: false,
-            payload: data.payload,
-            repo: data.repo,
-            lowerRaw: data.payload.raw.toLowerCase(),
-            id: getUniqueId(),
-          })
+          spliceListLimit(
+            (prev ?? []).concat({
+              hydrated: false,
+              payload: data.payload,
+              repo: data.repo,
+              lowerRaw: data.payload.raw.toLowerCase(),
+              id: getUniqueId(),
+            }),
+            logNumber
+          )
         );
       }
 
@@ -243,20 +262,23 @@ export function Layout(): React.ReactElement {
       ) {
         const value = hydrate(data.payload, data.repo);
         setEvaluationsByFrameId(event.data.frameId, (prev) => {
-          const selected = prev.find((item) => item.id === value.id);
-          if (selected) {
-            selected.lowerRaw = value.detail.raw.toLowerCase();
-            selected.detail = value.detail;
-            selected.error = value.error;
-            return [...prev];
-          }
-          return prev;
+          const list = () => {
+            const selected = prev.find((item) => item.id === value.id);
+            if (selected) {
+              selected.lowerRaw = value.detail.raw.toLowerCase();
+              selected.detail = value.detail;
+              selected.error = value.error;
+              return [...prev];
+            }
+            return prev;
+          };
+          return spliceListLimit(list(), logNumber);
         });
       }
     }
     window.addEventListener("message", onMessage);
     return (): void => window.removeEventListener("message", onMessage);
-  }, [setEvaluationsByFrameId]);
+  }, [inspectFrameIndex, selectedPanel, logNumber, setEvaluationsByFrameId]);
 
   React.useEffect(() => {
     function onMessage(event: MessageEvent): void {
@@ -350,13 +372,17 @@ export function Layout(): React.ReactElement {
       savePreserveLogs,
       evaluations: evaluationsMap[inspectFrameId] ?? [],
       setEvaluations,
+      logNumber,
+      setLogNumber,
     };
   }, [
     evaluationsMap,
     getFrameIdByFrameIndex,
     inspectFrameIndex,
     preserveLogs,
     setEvaluations,
+    logNumber,
+    setLogNumber,
   ]);
 
   const setTransformations = React.useCallback(

diff --git a/src/panel/components/PanelInput.tsx b/src/panel/components/PanelInput.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function PanelInput({
+  value,
+  onChange,
+  style,
+}: {
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  style?: React.CSSProperties;
+}): React.ReactElement {
+  return <div style={style}>{<input value={value} onChange={onChange} />}</div>;
+}
diff --git a/src/panel/libs/EvaluationsContext.ts b/src/panel/libs/EvaluationsContext.ts
@@ -6,6 +6,8 @@ export interface ContextOfEvaluations {
   setEvaluations?: React.Dispatch<React.SetStateAction<LazyEvaluation[]>>;
   preserveLogs?: boolean;
   savePreserveLogs?: React.Dispatch<React.SetStateAction<boolean>>;
+  logNumber?: number;
+  setLogNumber?: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export const EvaluationsContext = React.createContext<ContextOfEvaluations>({});

diff --git a/src/panel/style.css b/src/panel/style.css
@@ -92,6 +92,15 @@ body {
   align-items: center;
 }
 
+.toolbar--group-log-number-input {
+  display: flex;
+  align-items: center;
+}
+
+.toolbar--group-log-number-input > label {
+  margin-right: 4px;
+}
+
 .toolbar-group > *:not(:last-child) {
   margin-right: 10px;
 }