diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Modal.tsx | 3 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/components/WalletActivity.tsx | 155 |
2 files changed, 92 insertions, 66 deletions
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 ? ( |