You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flagon.apache.org by po...@apache.org on 2019/12/10 04:40:49 UTC
[incubator-flagon-useralejs] 01/02: [FLAGON-468] added packageLog,
packageCustomLog support via API and examples
This is an automated email from the ASF dual-hosted git repository.
poorejc pushed a commit to branch FLAGON-469
in repository https://gitbox.apache.org/repos/asf/incubator-flagon-useralejs.git
commit 8014a77fb258aeadfdc6f10af055b94accc0f696
Author: poorejc <po...@apache.org>
AuthorDate: Mon Dec 9 23:38:46 2019 -0500
[FLAGON-468] added packageLog, packageCustomLog support via API and examples
---
build/UserAleWebExtension/content.js | 5 ++--
build/userale-2.0.2.js | 56 ++++++++++++++++++++++++++++++++++--
build/userale-2.0.2.min.js | 2 +-
example/aleAPI.js | 52 +++++++++++++++++++++------------
example/index.html | 6 ++--
src/attachHandlers.js | 3 +-
src/getInitialSettings.js | 1 -
src/main.js | 1 +
src/packageLogs.js | 51 +++++++++++++++++++++++++++++++-
9 files changed, 146 insertions(+), 31 deletions(-)
diff --git a/build/UserAleWebExtension/content.js b/build/UserAleWebExtension/content.js
index ec59c1d..b6c4a13 100644
--- a/build/UserAleWebExtension/content.js
+++ b/build/UserAleWebExtension/content.js
@@ -87,7 +87,6 @@ function getInitialSettings() {
})();
var get = script ? script.getAttribute.bind(script) : function() { return null; };
- // @todo add authHeader setting
settings.autostart = get('data-autostart') === 'false' ? false : true;
settings.url = get('data-url') || 'http://localhost:8000';
settings.transmitInterval = +get('data-interval') || 5000;
@@ -287,7 +286,6 @@ function packageLog(e, detailFcn) {
(e.timeStamp && e.timeStamp > 0) ? config.time(e.timeStamp) : Date.now()
);
- // @todo add host IP in meta data properties
var log = {
'target' : getSelector(e.target),
'path' : buildPath(e),
@@ -639,7 +637,8 @@ function extractMouseEvent(e) {
'ctrl' : e.ctrlKey,
'alt' : e.altKey,
'shift' : e.shiftKey,
- 'meta' : e.metaKey
+ 'meta' : e.metaKey,
+// 'text' : e.target.innerHTML
};
}
diff --git a/build/userale-2.0.2.js b/build/userale-2.0.2.js
index db5a5a1..92875ca 100644
--- a/build/userale-2.0.2.js
+++ b/build/userale-2.0.2.js
@@ -58,7 +58,6 @@ var userale = (function (exports) {
})();
var get = script ? script.getAttribute.bind(script) : function() { return null; };
- // @todo add authHeader setting
settings.autostart = get('data-autostart') === 'false' ? false : true;
settings.url = get('data-url') || 'http://localhost:8000';
settings.transmitInterval = +get('data-interval') || 5000;
@@ -266,7 +265,6 @@ var userale = (function (exports) {
(e.timeStamp && e.timeStamp > 0) ? config.time(e.timeStamp) : Date.now()
);
- // @todo add host IP in meta data properties
var log = {
'target' : getSelector(e.target),
'path' : buildPath(e),
@@ -301,6 +299,56 @@ var userale = (function (exports) {
}
/**
+ * Packages the provided customLog to include standard meta data and appends it to the log container.
+ * @param {Object} customLog The behavior to be logged.
+ * @param {Function} detailFcn The function to extract additional log parameters from the event.
+ * @param {boolean} userAction Indicates user behavior (true) or system behavior (false)
+ * @return {boolean} Whether the event was logged.
+ */
+ function packageCustomLog(customLog, detailFcn, userAction) {
+ if (!config.on) {
+ return false;
+ }
+
+ var details = null;
+ if (detailFcn) {
+ details = detailFcn();
+ }
+
+ var timeFields = extractTimeFields(Date.now());
+
+ var metaData = {
+ 'pageUrl': window.location.href,
+ 'pageTitle': document.title,
+ 'pageReferrer': document.referrer,
+ 'clientTime' : timeFields.milli,
+ 'microTime' : timeFields.micro,
+ 'logType': 'custom',
+ 'userAction' : userAction,
+ 'details' : details,
+ 'userId' : config.userId,
+ 'toolVersion' : config.version,
+ 'toolName' : config.toolName,
+ 'useraleVersion': config.useraleVersion,
+ 'sessionID': config.sessionID
+ };
+
+ var log = Object.assign(customLog, metaData);
+
+ if ((typeof filterHandler === 'function') && !filterHandler(log)) {
+ return false;
+ }
+
+ if (typeof mapHandler === 'function') {
+ log = mapHandler(log);
+ }
+
+ logs.push(log);
+
+ return true;
+ }
+
+ /**
* Extract the millisecond and microsecond portions of a timestamp.
* @param {Number} timeStamp The timestamp to split into millisecond and microsecond fields.
* @return {Object} An object containing the millisecond
@@ -618,7 +666,8 @@ var userale = (function (exports) {
'ctrl' : e.ctrlKey,
'alt' : e.altKey,
'shift' : e.shiftKey,
- 'meta' : e.metaKey
+ 'meta' : e.metaKey,
+ // 'text' : e.target.innerHTML
};
}
@@ -820,6 +869,7 @@ var userale = (function (exports) {
exports.log = log;
exports.map = setLogMapper;
exports.options = options;
+ exports.packageCustomLog = packageCustomLog;
exports.packageLog = packageLog;
exports.start = start;
exports.stop = stop;
diff --git a/build/userale-2.0.2.min.js b/build/userale-2.0.2.min.js
index 2d6fe76..fbef41e 100644
--- a/build/userale-2.0.2.min.js
+++ b/build/userale-2.0.2.min.js
@@ -15,4 +15,4 @@
* limitations under the License.
* @preserved
*/
-var userale=function(n){"use strict";var a,i,u,l,s,c,d,f,t="2.0.2",r=null;function e(n,o){Object.keys(o).forEach(function(t){if("userFromParams"===t){var e=function(t){var e=new RegExp("[?&]"+t+"(=([^&#]*)|&|#|$)"),n=window.location.href.match(e);return n&&n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):null}(o[t]);e&&(n.userId=e)}n[t]=o[t]})}var m=null,p=null;function o(t,e){if(!i.on)return!1;var n=null;e&&(n=e(t));var o=function(t){return{milli:Math.floor(t),micro:Number((t%1).toFixed [...]
\ No newline at end of file
+var userale=function(n){"use strict";var u,l,a,i,s,c,d,f,e="2.0.2",r=null;function t(n,o){Object.keys(o).forEach(function(e){if("userFromParams"===e){var t=function(e){var t=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)"),n=window.location.href.match(t);return n&&n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):null}(o[e]);t&&(n.userId=t)}n[e]=o[e]})}var m=null,p=null;function o(e,t){if(!l.on)return!1;var n=null;t&&(n=t(e));var o=g(e.timeStamp&&0<e.timeStamp?l.time(e.timeStamp):Date.now()),r={t [...]
\ No newline at end of file
diff --git a/example/aleAPI.js b/example/aleAPI.js
index 51c5f65..e28da8b 100644
--- a/example/aleAPI.js
+++ b/example/aleAPI.js
@@ -17,15 +17,15 @@
const changeMe = "me";
window.userale.options({
"userId": changeMe,
- "version": "4.2.1",
- "sessionID": "42"
+ "version": "next",
+ "sessionID": "this one"
});
/**Filter API
/**Try out the 'Filter' API to eliminate the logs that you don't want!*/
window.userale.filter(function (log) {
- var type_array = ['mouseup', 'mouseover', 'mousedown', 'keydown', 'dblclick', 'blur', 'focus'];
+ var type_array = ['mouseup', 'mouseover', 'mousedown', 'keydown', 'dblclick', 'blur', 'focus', 'input'];
var logType_array = ['interval'];
return !type_array.includes(log.type) && !logType_array.includes(log.logType);
});
@@ -34,10 +34,10 @@ window.userale.filter(function (log) {
/**Play around with the 'Mapping' API to add or modify existing fields in your logs!*/
/**the example below modifies fields attached to logs on the "Click Me" button on the Example page*/
-window.userale.map(function (log) {
+window.userale.map(function (log, e) {
var targetsForLabels = ["button#test_button"];
if (targetsForLabels.includes(log.target)) {
- return Object.assign({}, log, { customLabel: "Click Me!" });
+ return Object.assign({}, log, { customLabel: e.target.innerHTML });
} else {
return log;
}
@@ -49,22 +49,22 @@ window.userale.map(function (log) {
/*You can fully customize your custom logs and define any data schema that suits you*/
/**this example works with the "Test Field" form element on the Example Page*/
document.addEventListener('change', function(e) {
- if (e.target.value === 'goodbye') {
+ if (e.target.value === 'log') {
window.userale.log({
target: window.userale.getSelector(e.target),
path: window.userale.buildPath(e),
- pageUrl: 'userALEtest.com',
- pageTitle: 'UserAleJS - Example Page',
- type: 'change',
+ type: e.type,
logType: 'custom',
userAction: false,
- details: 'disinterested user',
+ details: 'I can make this log look like anything I want',
+ customField1: 'foo',
+ customField2: 'bar',
userId: window.userale.options().userId,
toolVersion: window.userale.options().version,
toolName: window.userale.options().toolName,
useraleVersion: window.userale.options().useraleVersion,
sessionID: window.userale.options().sessionID,
- customLabel: "no follow up"
+ customLabel: "(custom) log Example!"
});
}
});
@@ -72,19 +72,35 @@ document.addEventListener('change', function(e) {
/**Alternatively, you can use UserALE.js' own packaging function for HTML events to strive for standardization!*/
/**this example works with the "Test Field" form element on the Example Page*/
document.addEventListener('change', function(e){
- if (e.target.value === 'hello') {
- window.userale.packageLog(e, function(){return "cool user!"});
+ if (e.target.value === 'packageLog') {
+ window.userale.map(function (log) {
+ var targetsForLabels = ["packaged this log"];
+ if (targetsForLabels.includes(log.details)) {
+ return Object.assign({}, log, { logType: 'custom', customLabel: 'packageLog Example' });
+ } else {
+ return log;
+ }
+ });
+ // todo figure out passing details output to packagelog window.userale.details(window.userale.options());
+ window.userale.packageLog(e, events['change']);
} else {
return false
}
});
/**You can then use the 'Mapping' API function to modify custom logs created with the packageLog function*/
-window.userale.map(function (log) {
- var targetsForLabels = ["cool user!"];
- if (targetsForLabels.includes(log.details)) {
- return Object.assign({}, log, { logType: 'custom', customLabel: "follow up" });
+
+
+document.addEventListener('change', function(e) {
+ if (e.target.value === 'packageCustomLog') {
+ window.userale.packageCustomLog({
+ customLabel: 'packageCustomLog Example!',
+ customField1: 'foo',
+ customField2: 'bar'},
+ function(){return 'add additional details here!'},
+ true
+ );
} else {
- return log;
+ return false
}
});
diff --git a/example/index.html b/example/index.html
index 5ca829a..9d42a2c 100644
--- a/example/index.html
+++ b/example/index.html
@@ -18,16 +18,16 @@ limitations under the License.
<!-- Load UserALE.js and set logging parameters-->
<script
- src="file:///...Apache_Flagon/dev/incubator-flagon-useralejs/build/userale-2.0.2.min.js"
+ src="file:///Users/jpoore/Documents/Apache_Flagon/dev/incubator-flagon-useralejs/build/userale-2.0.2.min.js"
data-url="http://localhost:8000/"
data-user="example-user"
- data-log-details="true"
+ data-log-details="false"
data-version="2.0.2"
data-tool="Apache UserALE.js Example"
></script>
<!-- Load UserALE.js API calls to modify log stream -->
<script
- src="file:///...Apache_Flagon/dev/incubator-flagon-useralejs/example/aleAPI.js"
+ src="file:///Users/jpoore/Documents/Apache_Flagon/dev/incubator-flagon-useralejs/example/aleAPI.js"
></script>
</head>
<body>
diff --git a/src/attachHandlers.js b/src/attachHandlers.js
index f56aa2e..0afb8a2 100644
--- a/src/attachHandlers.js
+++ b/src/attachHandlers.js
@@ -40,7 +40,8 @@ function extractMouseEvent(e) {
'ctrl' : e.ctrlKey,
'alt' : e.altKey,
'shift' : e.shiftKey,
- 'meta' : e.metaKey
+ 'meta' : e.metaKey,
+// 'text' : e.target.innerHTML
};
}
diff --git a/src/getInitialSettings.js b/src/getInitialSettings.js
index e96835a..fa89b45 100644
--- a/src/getInitialSettings.js
+++ b/src/getInitialSettings.js
@@ -35,7 +35,6 @@ export function getInitialSettings() {
})();
var get = script ? script.getAttribute.bind(script) : function() { return null; };
- // @todo add authHeader setting
settings.autostart = get('data-autostart') === 'false' ? false : true;
settings.url = get('data-url') || 'http://localhost:8000';
settings.transmitInterval = +get('data-interval') || 5000;
diff --git a/src/main.js b/src/main.js
index d6cae6c..96b6c9b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,7 @@ export {
setLogMapper as map,
setLogFilter as filter,
packageLog as packageLog,
+ packageCustomLog as packageCustomLog,
getSelector as getSelector,
buildPath as buildPath,
} from './packageLogs.js';
diff --git a/src/packageLogs.js b/src/packageLogs.js
index 3702b95..9395139 100644
--- a/src/packageLogs.js
+++ b/src/packageLogs.js
@@ -84,7 +84,6 @@ export function packageLog(e, detailFcn) {
(e.timeStamp && e.timeStamp > 0) ? config.time(e.timeStamp) : Date.now()
);
- // @todo add host IP in meta data properties
var log = {
'target' : getSelector(e.target),
'path' : buildPath(e),
@@ -119,6 +118,56 @@ export function packageLog(e, detailFcn) {
}
/**
+ * Packages the provided customLog to include standard meta data and appends it to the log container.
+ * @param {Object} customLog The behavior to be logged.
+ * @param {Function} detailFcn The function to extract additional log parameters from the event.
+ * @param {boolean} userAction Indicates user behavior (true) or system behavior (false)
+ * @return {boolean} Whether the event was logged.
+ */
+export function packageCustomLog(customLog, detailFcn, userAction) {
+ if (!config.on) {
+ return false;
+ }
+
+ var details = null;
+ if (detailFcn) {
+ details = detailFcn();
+ }
+
+ var timeFields = extractTimeFields(Date.now());
+
+ var metaData = {
+ 'pageUrl': window.location.href,
+ 'pageTitle': document.title,
+ 'pageReferrer': document.referrer,
+ 'clientTime' : timeFields.milli,
+ 'microTime' : timeFields.micro,
+ 'logType': 'custom',
+ 'userAction' : userAction,
+ 'details' : details,
+ 'userId' : config.userId,
+ 'toolVersion' : config.version,
+ 'toolName' : config.toolName,
+ 'useraleVersion': config.useraleVersion,
+ 'sessionID': config.sessionID
+ };
+
+ var log = Object.assign(customLog, metaData);
+
+ if ((typeof filterHandler === 'function') && !filterHandler(log)) {
+ return false;
+ }
+
+ if (typeof mapHandler === 'function') {
+ log = mapHandler(log);
+ }
+
+ logs.push(log);
+
+ return true;
+}
+
+/**
* Extract the millisecond and microsecond portions of a timestamp.
* @param {Number} timeStamp The timestamp to split into millisecond and microsecond fields.
* @return {Object} An object containing the millisecond