WIP: feat: circular and non-stringify values

easyops-cn · Apr 17, 2020 · f6425e4 · f6425e4
1 parent 13f5277
commit f6425e4
Show file tree

Hide file tree

Showing 11 changed files with 420 additions and 96 deletions.
diff --git a/src/components/EvaluationsPanel.tsx b/src/components/EvaluationsPanel.tsx
@@ -1,68 +1,62 @@
 import React from "react";
+import { Button, Tooltip, ButtonGroup } from "@blueprintjs/core";
 import { PanelSelector } from "./PanelSelector";
 import { PropTree, StandaloneValue } from "./PropTree";
+import { useEvaluationsContext } from "../libs/EvaluationsContext";
 
 export function EvaluationsPanel(): React.ReactElement {
+  const { evaluations, setEvaluations } = useEvaluationsContext();
+
+  const handleClear = React.useCallback(() => {
+    setEvaluations([]);
+  }, [setEvaluations]);
+
   return (
     <div className="panel evaluations-panel">
       <div className="evaluations-toolbar">
         <PanelSelector />
+        <ButtonGroup>
+          <Tooltip content="Clear" hoverOpenDelay={300}>
+            <Button icon="disable" minimal onClick={handleClear} />
+          </Tooltip>
+        </ButtonGroup>
       </div>
       <div className="table-view">
-        <table className="bp3-html-table bp3-html-table-bordered bp3-html-table-condensed">
-          <thead>
-            <tr>
-              <th>Expression</th>
-              <th>Context</th>
-              <th>Result</th>
-            </tr>
-          </thead>
-          <tbody className="source-code">
-            <tr>
-              <td>
-                <StandaloneValue value="<% EVENT.detail %>" />
-                {/* <span className="prop-value-punctuation">{'"'}</span>
-                <span className="prop-value-string">{'<% EVENT.detail %>'}</span>
-                <span className="prop-value-punctuation">{'"'}</span> */}
-              </td>
-              <td>
-                <PropTree
-                  properties={{
-                    EVENT: {
-                      type: "oops",
-                      detail: "good",
-                    },
-                  }}
-                />
-              </td>
-              <td>
-                <StandaloneValue value="good" />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <StandaloneValue value="<% DATA.map(item => item.id) %>" />
-              </td>
-              <td>
-                <PropTree
-                  properties={{
-                    DATA: [
-                      {
-                        id: 1,
-                      },
-                      {
-                        id: 2,
-                      },
-                    ],
-                  }}
-                />
-              </td>
-              <td>
-                <StandaloneValue value={[1, 2]} />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className="scroll-container">
+          <table className="bp3-html-table bp3-html-table-bordered bp3-html-table-condensed">
+            <thead>
+              <tr>
+                <th>Expression</th>
+                <th>Context</th>
+                <th>Result</th>
+              </tr>
+            </thead>
+            <tbody className="source-code">
+              {evaluations.map((item, key) => (
+                <tr key={key}>
+                  <td>
+                    <StandaloneValue
+                      value={item.payload.raw}
+                      repo={item.repo}
+                    />
+                  </td>
+                  <td>
+                    <PropTree
+                      properties={item.payload.context}
+                      repo={item.repo}
+                    />
+                  </td>
+                  <td>
+                    <StandaloneValue
+                      value={item.payload.result}
+                      repo={item.repo}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -5,9 +5,52 @@ import { BricksPanel } from "./BricksPanel";
 import { SelectedPanelContext } from "../libs/SelectedPanelContext";
 import { EvaluationsPanel } from "./EvaluationsPanel";
 import { TransformationsPanel } from "./TransformationsPanel";
+import { Evaluation, Transformation, RepoWrapped } from "../libs/interfaces";
+import { EvaluationsContext } from "../libs/EvaluationsContext";
+import { MESSAGE_SOURCE_HOOK } from "../shared";
+import { TransformationsContext } from "../libs/TransformationsContext";
+import { Storage } from "../libs/Storage";
 
 export function Layout(): React.ReactElement {
-  const [selectedPanel, setSelectedPanel] = React.useState("Bricks");
+  const [selectedPanel, setSelectedPanel] = React.useState(
+    Storage.getItem("selectedPanel") ?? "Bricks"
+  );
+  const [evaluations, setEvaluations] = React.useState<
+    RepoWrapped<Evaluation>[]
+  >([]);
+  const [transformations, setTransformations] = React.useState<
+    RepoWrapped<Transformation>[]
+  >([]);
+
+  React.useEffect(() => {
+    function onMessage(event: MessageEvent): void {
+      if (
+        event.data?.source === MESSAGE_SOURCE_HOOK &&
+        event.data.payload?.type === "evaluation"
+      ) {
+        setEvaluations(evaluations.concat(event.data.payload));
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return (): void => window.removeEventListener("message", onMessage);
+  }, [evaluations]);
+
+  React.useEffect(() => {
+    function onMessage(event: MessageEvent): void {
+      if (
+        event.data?.source === MESSAGE_SOURCE_HOOK &&
+        event.data.payload?.type === "transformation"
+      ) {
+        setTransformations(transformations.concat(event.data.payload));
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return (): void => window.removeEventListener("message", onMessage);
+  }, [transformations]);
+
+  React.useEffect(() => {
+    Storage.setItem("selectedPanel", selectedPanel);
+  }, [selectedPanel]);
 
   const theme = chrome.devtools.panels.themeName === "dark" ? "dark" : "light";
 
@@ -22,9 +65,17 @@ export function Layout(): React.ReactElement {
           value={{ selectedPanel, setSelectedPanel }}
         >
           {selectedPanel === "Evaluations" ? (
-            <EvaluationsPanel />
+            <EvaluationsContext.Provider
+              value={{ evaluations, setEvaluations }}
+            >
+              <EvaluationsPanel />
+            </EvaluationsContext.Provider>
           ) : selectedPanel === "Transformations" ? (
-            <TransformationsPanel />
+            <TransformationsContext.Provider
+              value={{ transformations, setTransformations }}
+            >
+              <TransformationsPanel />
+            </TransformationsContext.Provider>
           ) : (
             <BricksPanel />
           )}