Enhance logging with timestamps and filtering.

src/js/app.js

@@ -11,6 +11,7 @@ var modules = [
   'ngLodash',
   'ngCsv',
   'angular-md5',
+  'rzModule',
   'bwcModule',
   'bitauthModule',
   'copayApp.filters',

src/js/controllers/preferencesLogs.js

@@ -3,17 +3,51 @@
 angular.module('copayApp.controllers').controller('preferencesLogs',
   function($scope, historicLog, platformInfo) {
 
+    var logLevels = historicLog.getLevels();
+    var logFilterWeight = historicLog.getDefaultLevel().weight;
+
+    // Log level slider setup.
+    var logLevelSliderInitialValue = logFilterWeight;
+    var logLevelSliderCeil = logFilterWeight;
+    var logLevelSliderStepsArray = [];
+
+    for (var i = 0; i < logLevels.length; i++) {
+      logLevelSliderStepsArray.push({value: logLevels[i].weight, legend: logLevels[i].label});
+    }
+
+    $scope.logOptionsTitle = 'Filter log';
+    $scope.logOptions = {
+      logLevelSlider: {
+        value: logLevelSliderInitialValue,
+        opts: {
+          floor: 0,
+          ceil: logLevelSliderCeil,
+          step: 1,
+          hideLimitLabels: true,
+          hidePointerLabels: true,
+          showTicks: true,
+          showTicksValues: false,
+          showSelectionBar: true,
+          stepsArray: logLevelSliderStepsArray,
+          onEnd: function(sliderId, modelValue, highValue, pointerType) {
+            $scope.filteredLogs = historicLog.get(modelValue);
+          }
+        }
+      }
+    };
+
     $scope.$on("$ionicView.beforeEnter", function(event, data) {
       $scope.isCordova = platformInfo.isCordova;
     });
 
     $scope.$on("$ionicView.enter", function(event, data) {
-      $scope.logs = historicLog.get();
+      $scope.allLogs = historicLog.get();
+      $scope.filteredLogs = historicLog.get(logFilterWeight);
 
       $scope.prepare = function() {
         var log = 'Copay Session Logs\n Be careful, this could contain sensitive private data\n\n';
         log += '\n\n';
-        log += $scope.logs.map(function(v) {
+        log += $scope.allLogs.map(function(v) {
           return v.msg;
         }).join('\n');
 
@@ -35,5 +69,8 @@ angular.module('copayApp.controllers').controller('preferencesLogs',
         );
       };
 
+      $scope.showOptionsMenu = function() {
+        $scope.showOptions = true;
+      };
     });
   });

src/js/directives/logOptions.js

@@ -0,0 +1,20 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('logOptions', function($timeout) {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/logOptions.html',
+      transclude: true,
+      scope: {
+        show: '=logOptionsShow',
+        options: '=logOptions',
+        title: '=logOptionsTitle'
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+      }
+    };
+  });

src/js/routes.js

@@ -44,7 +44,8 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
       function($delegate, platformInfo) {
         var historicLog = historicLogProvider.$get();
 
-        ['debug', 'info', 'warn', 'error', 'log'].forEach(function(level) {
+        historicLog.getLevels().forEach(function(levelDesc) {
+          var level = levelDesc.level;
           if (platformInfo.isDevel && level == 'error') return;
 
           var orig = $delegate[level];
@@ -75,7 +76,9 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
                 console.log('Error at log decorator:', e);
                 v = 'undefined';
               }
-              return v;
+              var ts = '[' + new Date().toISOString() + ']';
+              var lvl = '[' + level + '] ';
+              return ts + lvl + v;
             });
 
             try {

src/js/services/historicLog.js

@@ -1,9 +1,32 @@
 'use strict';
 var logs = [];
 angular.module('copayApp.services')
-  .factory('historicLog', function historicLog() {
+  .factory('historicLog', function historicLog(lodash) {
     var root = {};
 
+    var levels = [
+      { level: 'info',  weight: 0, label: 'Info'},
+      { level: 'warn',  weight: 1, label: 'Warning'},
+      { level: 'error', weight: 2, label: 'Error'},
+      { level: 'debug', weight: 3, label: 'Debug', default: true}
+    ];
+
+    // Create an array of level weights for performant filtering.
+    var weight = {};
+    for (var i = 0; i < levels.length; i++) {
+      weight[levels[i].level] = levels[i].weight;
+    }
+
+    root.getLevels = function() {
+      return levels;
+    };
+
+    root.getDefaultLevel = function() {
+      return lodash.find(levels, function(l) {
+        return l.default;
+      });
+    };
+
     root.add = function(level, msg) {
       logs.push({
         level: level,
@@ -11,8 +34,14 @@ angular.module('copayApp.services')
       });
     };
 
-    root.get = function() {
-      return logs;
+    root.get = function(filterWeight) {
+      var filteredLogs = logs;
+      if (filterWeight != undefined) {
+        filteredLogs = lodash.filter(logs, function(l) {
+          return weight[l.level] <= filterWeight;
+        });
+      }
+      return filteredLogs;
     };
 
     return root;

src/js/services/profileService.js

@@ -134,7 +134,7 @@ angular.module('copayApp.services')
         wallet.setNotificationsInterval(UPDATE_PERIOD);
         wallet.openWallet(function(err) {
           if (wallet.status !== true)
-            $log.log('Wallet + ' + walletId + ' status:' + wallet.status)
+            $log.debug('Wallet + ' + walletId + ' status:' + wallet.status)
         });
       });
 

src/sass/directives/directives.scss

@@ -1 +1,2 @@
-@import "gravatar"
+@import "gravatar";
+@import "rzslider";

src/sass/directives/rzslider.scss

@@ -0,0 +1,47 @@
+.stable-slider.rzslider .rz-bar {
+  background: $v-light-gray;
+  height: 2px;
+}
+.stable-slider.rzslider .rz-selection {
+  background: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-pointer {
+  width: 20px;
+  height: 20px;
+  top: -9px;
+  bottom: 0;
+  background-color: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-pointer:after {
+  display: none;
+}
+
+.stable-slider.rzslider .rz-bubble {
+  bottom: 14px;
+}
+
+.stable-slider.rzslider .rz-limit {
+  font-weight: bold;
+  color: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-tick {
+  width: 10px;
+  height: 10px;
+  margin-left: 4px;
+  border-radius: 50%;
+  background: $v-light-gray;
+  top: -1px;
+}
+
+.stable-slider.rzslider .rz-tick.rz-selected {
+  background: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-tick-legend {
+	top: 20px;
+	font-size: 12px;
+	color: $v-dark-gray;
+}

src/sass/views/includes/logOptions.scss

@@ -0,0 +1,68 @@
+log-options {
+
+  $border-color: #EFEFEF;
+
+  .bp-action-sheet__sheet {
+    padding-left: 2rem;
+    padding-right: .75rem;
+  }
+
+  .log-options {
+    .option {
+      border: 0;
+      padding-right: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-bottom: 1px;
+      overflow: visible;
+
+      > i {
+        color: $v-accent-color;
+        padding: 0 0 5px 0;
+        margin-left: -5px;
+
+        > img {
+          height: 39px;
+          width: 39px;
+          padding: 4px;
+        }
+      }
+    }
+    .log-options-inner {
+      display: flex;
+      position: relative;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      &::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: $border-color;
+        bottom: 0;
+        right: 0;
+        content: '';
+      }
+
+      .check {
+        padding: 0 1.2rem;
+      }
+    }
+    .log-options-details {
+      flex-grow: 1;
+
+      .log-options-name {
+        padding-bottom: 5px;
+      }
+    }
+
+    .log-level-slider {
+      width: 90%;
+      margin: auto;
+      font-size: 12px;
+      height: 90px;
+    }
+  }
+
+}

src/sass/views/tab-settings.scss

@@ -75,6 +75,14 @@
       font-weight: bold;
     }
   }
+  .setting-range-hdist {
+    display: table;
+    width: 100%;
+    span {
+      display: table-cell;
+      text-align: center;
+    }
+  }
  .settings-list {
     .item {
       color: $v-dark-gray;
@@ -119,6 +127,10 @@
     color: #00901B;
    }
  }
+ .log-text {
+    font-size: 12px;
+    line-height: 18px;
+  }
 }
 
 #tab-settings {