From 61211b5237b0eeb0ab935f530328a4b57f844be3 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 18 Jun 2024 12:51:05 -0300
Subject: filter obs by screen

---
 .../src/components/Modal.tsx                       |   3 +-
 .../src/components/WalletActivity.tsx              | 155 ++++++++++++---------
 2 files changed, 92 insertions(+), 66 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/components')

diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx
index f8c0f1651..c5f716c76 100644
--- a/packages/taler-wallet-webextension/src/components/Modal.tsx
+++ b/packages/taler-wallet-webextension/src/components/Modal.tsx
@@ -52,8 +52,7 @@ const Body = styled.div`
 
 export function Modal({ title, children, onClose }: Props): VNode {
   return (
-    <div style={{ top: 0, width: "100%", height: "100%" }}>
-
+    <div style={{ top: 0, position: "fixed", width: "100%", height: "100%" }}>
       <FullSize onClick={onClose?.onClick}>
         <div
           onClick={(e) => e.stopPropagation()}
diff --git a/packages/taler-wallet-webextension/src/components/WalletActivity.tsx b/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
index f29d0b0f7..b3b1a5c1f 100644
--- a/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
+++ b/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
@@ -39,6 +39,7 @@ import { WxApiType } from "../wxApi.js";
 import { WalletActivityTrack } from "../wxBackend.js";
 import { Modal } from "./Modal.js";
 import { Time } from "./Time.js";
+import { Checkbox } from "./Checkbox.js";
 
 const OPEN_ACTIVITY_HEIGHT_PX = 250;
 const CLOSE_ACTIVITY_HEIGHT_PX = 40;
@@ -212,7 +213,10 @@ function ShowBackupOperationError({ events, onClick }: MoreInfoPRops): VNode {
                   <dd>{error.hint ?? "--"}</dd>
                   <dt>Time</dt>
                   <dd>
-                    <Time timestamp={error.when} format="yyyy/MM/dd HH:mm:ss" />
+                    <Time
+                      timestamp={error.when}
+                      format="yyyy/MM/dd HH:mm:ss.SSS"
+                    />
                   </dd>
                 </dl>
                 <pre
@@ -360,28 +364,36 @@ function ShowObservabilityEvent({ events, onClick }: MoreInfoPRops): VNode {
 
     const title = (function () {
       switch (not.event.type) {
-        case ObservabilityEventType.HttpFetchFinishError:
-        case ObservabilityEventType.HttpFetchFinishSuccess:
         case ObservabilityEventType.HttpFetchStart:
           return "HTTP Request";
-        case ObservabilityEventType.DbQueryFinishSuccess:
-        case ObservabilityEventType.DbQueryFinishError:
+        case ObservabilityEventType.HttpFetchFinishSuccess:
+          return "HTTP Request (o)";
+        case ObservabilityEventType.HttpFetchFinishError:
+          return "HTTP Request (x)";
         case ObservabilityEventType.DbQueryStart:
           return "Database";
-        case ObservabilityEventType.RequestFinishSuccess:
-        case ObservabilityEventType.RequestFinishError:
+        case ObservabilityEventType.DbQueryFinishSuccess:
+          return "Database (o)";
+        case ObservabilityEventType.DbQueryFinishError:
+          return "Database (x)";
         case ObservabilityEventType.RequestStart:
           return "Wallet";
-        case ObservabilityEventType.CryptoFinishSuccess:
-        case ObservabilityEventType.CryptoFinishError:
+        case ObservabilityEventType.RequestFinishSuccess:
+          return "Wallet (o)";
+        case ObservabilityEventType.RequestFinishError:
+          return "Wallet (x)";
         case ObservabilityEventType.CryptoStart:
           return "Crypto";
+        case ObservabilityEventType.CryptoFinishSuccess:
+          return "Crypto (o)";
+        case ObservabilityEventType.CryptoFinishError:
+          return "Crypto (x)";
         case ObservabilityEventType.TaskStart:
-          return "Task start";
+          return "Task";
         case ObservabilityEventType.TaskStop:
-          return "Task stop";
+          return "Task (s)";
         case ObservabilityEventType.TaskReset:
-          return "Task reset";
+          return "Task (r)";
         case ObservabilityEventType.ShepherdTaskResult:
           return "Schedule";
         case ObservabilityEventType.DeclareTaskDependency:
@@ -401,12 +413,11 @@ function ShowObservabilityEvent({ events, onClick }: MoreInfoPRops): VNode {
     );
   });
   return (
-    <table>
+    <table style={{ width: "100%" }}>
       <thead>
         <td>Event</td>
         <td>Info</td>
-        <td>Start</td>
-        <td>End</td>
+        <td>When</td>
       </thead>
       <tbody>{asd}</tbody>
     </table>
@@ -417,11 +428,9 @@ function ShowObervavilityDetails({
   title,
   notif,
   onClick,
-  prev,
 }: {
   title: string;
   notif: ObservaNotifWithTime;
-  prev?: ObservaNotifWithTime;
   onClick: (content: VNode) => void;
 }): VNode {
   switch (notif.event.type) {
@@ -443,7 +452,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -454,21 +463,21 @@ function ShowObervavilityDetails({
           </td>
           <td>
             {notif.event.url}{" "}
-            {prev?.event.type ===
+            {notif?.event.type ===
             ObservabilityEventType.HttpFetchFinishSuccess ? (
-              `(${prev.event.status})`
-            ) : prev?.event.type ===
+              `(${notif.event.status})`
+            ) : notif?.event.type ===
               ObservabilityEventType.HttpFetchFinishError ? (
               <a
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
                   if (
-                    prev.event.type !==
+                    notif.event.type !==
                     ObservabilityEventType.HttpFetchFinishError
                   )
                     return;
-                  const error = prev.event.error;
+                  const error = notif.event.error;
                   onClick(
                     <Fragment>
                       <dl>
@@ -482,7 +491,7 @@ function ShowObervavilityDetails({
                         <dd>
                           <Time
                             timestamp={error.when}
-                            format="yyyy/MM/dd HH:mm:ss"
+                            format="yyyy/MM/dd HH:mm:ss.SSS"
                           />
                         </dd>
                       </dl>
@@ -504,11 +513,7 @@ function ShowObervavilityDetails({
           </td>
           <td>
             {" "}
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            {" "}
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -531,7 +536,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -544,10 +549,7 @@ function ShowObervavilityDetails({
             {notif.event.location} {notif.event.name}
           </td>
           <td>
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -572,7 +574,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -583,10 +585,7 @@ function ShowObervavilityDetails({
           </td>
           <td>{notif.event.taskId}</td>
           <td>
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -607,7 +606,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -618,10 +617,7 @@ function ShowObervavilityDetails({
           </td>
           <td>{notif.event.resultType}</td>
           <td>
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -644,7 +640,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -655,10 +651,7 @@ function ShowObervavilityDetails({
           </td>
           <td>{notif.event.operation}</td>
           <td>
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -681,7 +674,7 @@ function ShowObervavilityDetails({
                         wordBreak: "break-word",
                       }}
                     >
-                      {JSON.stringify({ event: notif, prev }, undefined, 2)}
+                      {JSON.stringify({ event: notif }, undefined, 2)}
                     </pre>
                   </Fragment>,
                 );
@@ -692,10 +685,7 @@ function ShowObervavilityDetails({
           </td>
           <td>{notif.event.type}</td>
           <td>
-            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss" />
-          </td>
-          <td>
-            <Time timestamp={prev?.when} format="yyyy/MM/dd HH:mm:ss" />
+            <Time timestamp={notif.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
           </td>
         </tr>
       );
@@ -706,13 +696,18 @@ function ShowObervavilityDetails({
   }
 }
 
+function createTabId(tab: chrome.tabs.Tab | undefined) {
+  return !tab ? "popup" : `${tab.windowId}:${tab.id}`;
+}
+
 function refresh(
   api: WxApiType,
   onUpdate: (list: WalletActivityTrack[]) => void,
   filter: string,
+  fromView?: chrome.tabs.Tab,
 ) {
   api.background
-    .call("getNotifications", { filter })
+    .call("getNotifications", { filter, operationsFrom: createTabId(fromView) })
     .then((notif) => {
       onUpdate(notif);
     })
@@ -721,6 +716,15 @@ function refresh(
     });
 }
 
+let currentTab: chrome.tabs.Tab | undefined;
+// Allow running outside the extension for testing
+// tslint:disable-next-line:no-string-literal
+if (typeof chrome !== "undefined") {
+  chrome.tabs.getCurrent().then((d) => {
+    currentTab = d;
+  });
+}
+
 export function ObservabilityEventsTable(): VNode {
   const { i18n } = useTranslationContext();
   const api = useBackendContext();
@@ -728,11 +732,17 @@ export function ObservabilityEventsTable(): VNode {
   const [notifications, setNotifications] = useState<WalletActivityTrack[]>([]);
   const [showDetails, setShowDetails] = useState<VNode>();
   const [filter, onChangeFilter] = useState("");
+  const [onlyThisScreen, setOnlyThisScreen] = useState(true);
 
   useEffect(() => {
     let lastTimeout: ReturnType<typeof setTimeout>;
     function periodicRefresh() {
-      refresh(api, setNotifications, filter);
+      refresh(
+        api,
+        setNotifications,
+        filter,
+        onlyThisScreen ? currentTab : undefined,
+      );
 
       lastTimeout = setTimeout(() => {
         periodicRefresh();
@@ -743,7 +753,7 @@ export function ObservabilityEventsTable(): VNode {
       };
     }
     return periodicRefresh();
-  }, [filter]);
+  }, [filter, onlyThisScreen]);
 
   return (
     <div>
@@ -754,6 +764,12 @@ export function ObservabilityEventsTable(): VNode {
           value={filter}
           onChange={onChangeFilter}
         />
+        <Checkbox
+          label={i18n.str`All events`}
+          name="terms"
+          onToggle={async () => setOnlyThisScreen((v) => !v)}
+          enabled={!onlyThisScreen}
+        />
         <div
           style={{
             padding: 4,
@@ -763,7 +779,12 @@ export function ObservabilityEventsTable(): VNode {
           }}
           onClick={() => {
             api.background.call("clearNotifications", undefined).then(() => {
-              refresh(api, setNotifications, filter);
+              refresh(
+                api,
+                setNotifications,
+                filter,
+                onlyThisScreen ? currentTab : undefined,
+              );
             });
           }}
         >
@@ -784,7 +805,7 @@ export function ObservabilityEventsTable(): VNode {
       )}
       {notifications.map((not) => {
         return (
-          <details key={not.id}>
+          <details key={not.groupId}>
             <summary>
               <div
                 style={{
@@ -829,10 +850,13 @@ export function ObservabilityEventsTable(): VNode {
                   })()}
                 </div>
                 <div style={{ padding: 4 }}>
-                  <Time timestamp={not.start} format="yyyy/MM/dd HH:mm:ss" />
+                  <Time
+                    timestamp={not.start}
+                    format="yyyy/MM/dd HH:mm:ss.SSS"
+                  />
                 </div>
                 <div style={{ padding: 4 }}>
-                  <Time timestamp={not.end} format="yyyy/MM/dd HH:mm:ss" />
+                  <Time timestamp={not.end} format="yyyy/MM/dd HH:mm:ss.SSS" />
                 </div>
               </div>
             </summary>
@@ -936,7 +960,7 @@ function ErroDetailModal({
         <dd>{error.hint ?? "--"}</dd>
         <dt>Time</dt>
         <dd>
-          <Time timestamp={error.when} format="yyyy/MM/dd HH:mm:ss" />
+          <Time timestamp={error.when} format="yyyy/MM/dd HH:mm:ss.SSS" />
         </dd>
       </dl>
       <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
@@ -1009,11 +1033,14 @@ export function ActiveTasksTable(): VNode {
                 <td>
                   <Time
                     timestamp={task.firstTry}
-                    format="yyyy/MM/dd HH:mm:ss"
+                    format="yyyy/MM/dd HH:mm:ss.SSS"
                   />
                 </td>
                 <td>
-                  <Time timestamp={task.nextTry} format="yyyy/MM/dd HH:mm:ss" />
+                  <Time
+                    timestamp={task.nextTry}
+                    format="yyyy/MM/dd HH:mm:ss.SSS"
+                  />
                 </td>
                 <td>
                   {!task.lastError?.code ? (
-- 
cgit v1.2.3