From 7db12ed6fc2866bb8cd99d2a2105824142b80e5a Mon Sep 17 00:00:00 2001 From: sumit12690 Date: Thu, 26 May 2022 11:32:32 +0530 Subject: [PATCH] feat(SignIn): emit operational metrics --- src/components/SignIn/SignIn.jsx | 26 +++++++++++++++++++++++++- src/components/hooks/index.js | 1 + src/components/hooks/useMetrics.js | 21 +++++++++++++++++++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/components/hooks/useMetrics.js diff --git a/src/components/SignIn/SignIn.jsx b/src/components/SignIn/SignIn.jsx index ac26d4ec4..836b32e30 100644 --- a/src/components/SignIn/SignIn.jsx +++ b/src/components/SignIn/SignIn.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {Button} from '../generic'; import Spinner from '../generic/Spinner/Spinner'; import webexComponentClasses from '../helpers'; +import {useMetrics} from '../hooks'; /** * Performs OAuth 2.0 Authorization @@ -36,12 +37,13 @@ export default function SignIn({ }) { const [isAuthenticating, setIsAuthenticating] = useState(false); const [cssClasses] = webexComponentClasses('sign-in', className); + const [emitMetrics] = useMetrics(); const openAuthUrl = () => { const arr = new Uint8Array(4); const state = window.crypto.getRandomValues(arr); const fullAuthUrl = `${authUrl}?client_id=${clientID}&response_type=code&redirect_uri=${encodeURI(redirectUri)}${scope !== '' ? `&scope=${encodeURI(scope)}` : ''}&state=${state}`; - + const startTime = window.performance.now(); const newWindow = window.open(fullAuthUrl, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=700'); setIsAuthenticating(true); @@ -50,6 +52,18 @@ export default function SignIn({ const timer = setInterval(() => { if (newWindow.closed) { clearInterval(timer); + let endTime = window.performance.now(); + + emitMetrics({ + fields: { + startTime, + endTime, + totalTime: endTime - startTime, + }, + metricName: 'windowTime', + type: 'operational', + }, 'loginId'); + getAccessToken().then((accessToken) => { if (accessToken) { if (Object.keys(tokenStoragePolicy).length !== 0) { @@ -80,6 +94,16 @@ export default function SignIn({ signInResponse(clientID, Error('Failed to fetch access token: ', err)); }); setIsAuthenticating(false); + endTime = window.performance.now(); + emitMetrics({ + fields: { + startTime, + endTime, + totalTime: endTime - startTime, + }, + metricName: 'authenticationTime', + type: 'operational', + }, 'loginId'); } }, 500); } diff --git a/src/components/hooks/index.js b/src/components/hooks/index.js index fe10db400..c7be7ea49 100644 --- a/src/components/hooks/index.js +++ b/src/components/hooks/index.js @@ -19,3 +19,4 @@ export {default as useRef} from './useRef'; export {default as useRoom} from './useRoom'; export {default as useStream} from './useStream'; export {default as useSpeakers} from './useSpeakers'; +export {default as useMetrics} from './useMetrics'; diff --git a/src/components/hooks/useMetrics.js b/src/components/hooks/useMetrics.js new file mode 100644 index 000000000..c7d320b94 --- /dev/null +++ b/src/components/hooks/useMetrics.js @@ -0,0 +1,21 @@ +import {useContext} from 'react'; + +import {AdapterContext} from './contexts'; + +/** + * A Webex metric. + * + * @external Metric + * @see {@link https://github.com/webex/component-adapter-interfaces/blob/master/src/MetricsAdapter.js#L6} + */ + +/** + * Custom hook that returns an function for submitting metrics + * + * @returns {Function>} The submit data function that will emit the metrics + */ +export default function useMetrics() { + const {metricsAdapter} = useContext(AdapterContext); + + return [(metric, loginId) => metricsAdapter.submitMetrics(metric, loginId)]; +}