Added device details to clicked link and submitted data events. Fixes #1009

gulpfile.js

@@ -23,7 +23,6 @@ gulp.task('vendorjs', function () {
             vendor_directory + 'jquery.js',
             vendor_directory + 'bootstrap.min.js',
             vendor_directory + 'moment.min.js',
-            vendor_directory + 'chartist.min.js',
             vendor_directory + 'papaparse.min.js',
             vendor_directory + 'd3.min.js',
             vendor_directory + 'topojson.min.js',
@@ -38,7 +37,8 @@ gulp.task('vendorjs', function () {
             vendor_directory + 'bootstrap-datetime.js',
             vendor_directory + 'select2.min.js',
             vendor_directory + 'core.min.js',
-            vendor_directory + 'highcharts.js'
+            vendor_directory + 'highcharts.js',
+            vendor_directory + 'ua-parser.min.js'
         ])
         .pipe(concat('vendor.js'))
         .pipe(rename({

static/css/main.css

@@ -578,6 +578,39 @@ td.details-control {
     display: none;
 }
 
+.timeline-device-details {
+    font-size: .8em;
+    margin-top: 10px;
+}
+
+.timeline-device-os>span.fa-stack {
+    font-size: .8em;
+}
+
+.timeline-device-browser>span.fa-stack {
+    font-size: .8em;
+}
+
+.timeline-device-browser>span.fa-stack>i.fa-stack-1x {
+    font-size: 1.5em;
+}
+
+i.fa-vendor-icon {
+    font-size: .6em;
+}
+
+i.fa-tablet+i.fa-vendor-icon {
+    top: -2px;
+}
+
+i.fa-tablet+i.fa-vendor-icon {
+    top: -2px;
+}
+
+i.fa-laptop+i.fa-vendor-icon {
+    top: -2px;
+}
+
 .tooltip-inner {
     width: 300px !important;
 }

static/js/src/app/campaign_results.js

@@ -283,6 +283,79 @@ function replay(event_idx) {
     }
 }
 
+/**
+ * Returns an HTML string that displays the OS and browser that clicked the link
+ * or submitted credentials.
+ * 
+ * @param {object} event_details - The "details" parameter for a campaign
+ *  timeline event
+ * 
+ */
+var renderDevice = function (event_details) {
+    var ua = UAParser(details.browser['user-agent'])
+    var detailsString = '<div class="timeline-device-details">'
+
+    var deviceIcon = 'laptop'
+    if (ua.device.type) {
+        if (ua.device.type == 'tablet' || ua.device.type == 'mobile') {
+            deviceIcon = ua.device.type
+        }
+    }
+
+    var deviceVendor = ''
+    if (ua.device.vendor) {
+        deviceVendor = ua.device.vendor.toLowerCase()
+        if (deviceVendor == 'microsoft') deviceVendor = 'windows'
+    }
+
+    var deviceName = 'Unknown'
+    if (ua.os.name) {
+        deviceName = ua.os.name
+        if (deviceName == "Mac OS") {
+            deviceVendor = 'apple'
+        } else if (deviceName == "Windows") {
+            deviceVendor = 'windows'
+        }
+        if (ua.device.vendor && ua.device.model) {
+            deviceName = ua.device.vendor + ' ' + ua.device.model
+        }
+    }
+
+    if (ua.os.version) {
+        deviceName = deviceName + ' (OS Version: ' + ua.os.version + ')'
+    }
+
+    deviceString = '<div class="timeline-device-os"><span class="fa fa-stack">' +
+        '<i class="fa fa-' + escapeHtml(deviceIcon) + ' fa-stack-2x"></i>' +
+        '<i class="fa fa-vendor-icon fa-' + escapeHtml(deviceVendor) + ' fa-stack-1x"></i>' +
+        '</span> ' + escapeHtml(deviceName) + '</div>'
+
+    detailsString += deviceString
+
+    var deviceBrowser = 'Unknown'
+    var browserIcon = 'info-circle'
+    var browserVersion = ''
+
+    if (ua.browser && ua.browser.name) {
+        deviceBrowser = ua.browser.name
+        // Handle the "mobile safari" case
+        deviceBrowser = deviceBrowser.replace('Mobile ', '')
+        if (deviceBrowser) {
+            browserIcon = deviceBrowser.toLowerCase()
+            if (browserIcon == 'ie') browserIcon = 'internet-explorer'
+        }
+        browserVersion = '(Version: ' + ua.browser.version + ')'
+    }
+
+    var browserString = '<div class="timeline-device-browser"><span class="fa fa-stack">' +
+        '<i class="fa fa-' + escapeHtml(browserIcon) + ' fa-stack-1x"></i></span> ' +
+        deviceBrowser + ' ' + browserVersion + '</div>'
+
+    detailsString += browserString
+    detailsString += '</div>'
+    return detailsString
+}
+
 function renderTimeline(data) {
     record = {
         "first_name": data[2],
@@ -308,12 +381,18 @@ function renderTimeline(data) {
                 '    <div class="timeline-message">' + escapeHtml(event.message) +
                 '    <span class="timeline-date">' + moment.utc(event.time).local().format('MMMM Do YYYY h:mm:ss a') + '</span>'
             if (event.details) {
+                details = JSON.parse(event.details)
+                if (event.message == "Clicked Link" || event.message == "Submitted Data") {
+                    deviceView = renderDevice(details)
+                    if (deviceView) {
+                        results += deviceView
+                    }
+                }
                 if (event.message == "Submitted Data") {
                     results += '<div class="timeline-replay-button"><button onclick="replay(' + i + ')" class="btn btn-success">'
                     results += '<i class="fa fa-refresh"></i> Replay Credentials</button></div>'
                     results += '<div class="timeline-event-details"><i class="fa fa-caret-right"></i> View Details</div>'
                 }
-                details = JSON.parse(event.details)
                 if (details.payload) {
                     results += '<div class="timeline-event-results">'
                     results += '    <table class="table table-condensed table-bordered table-striped">'