Enhance logging with timestamps and filtering.

Gruntfile.js

@@ -137,6 +137,7 @@ module.exports = function(grunt) {
           'bower_components/angular-md5/angular-md5.js',
           'bower_components/angular-mocks/angular-mocks.js',
           'bower_components/ngtouch/src/ngTouch.js',
+          'bower_components/angularjs-slider/dist/rzslider.min.js',
           'angular-bitauth/angular-bitauth.js',
           'angular-bitcore-wallet-client/angular-bitcore-wallet-client.js'
         ],
@@ -161,6 +162,13 @@ module.exports = function(grunt) {
           'node_modules/cordova-plugin-qrscanner/dist/cordova-plugin-qrscanner-lib.min.js'
         ],
         dest: 'www/js/app.js'
+      },
+      css: {
+        src: [
+          'www/css/main.css',
+          'bower_components/angularjs-slider/dist/rzslider.css'
+        ],
+        dest: 'www/css/main.css'
       }
     },
     uglify: {

bower.json

@@ -11,6 +11,7 @@
     "angular-gettext": "2.2.1",
     "angular-moment": "0.10.1",
     "angular-qrcode": "bitpay/angular-qrcode#~6.3.0",
+    "angularjs-slider": "^6.2.3",
     "ionic": "https://github.com/ionic-team/ionic-v1.git",
     "moment": "2.10.3",
     "ng-lodash": "0.2.3",

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 {

www/views/includes/logOptions.html

@@ -0,0 +1,7 @@
+<action-sheet action-sheet-show="show" class="log-options">
+  <img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
+  <div class="header">{{title}}</div>
+  <div class="log-level-slider">
+    <rzslider class="stable-slider" rz-slider-model="options.logLevelSlider.value" rz-slider-options="options.logLevelSlider.opts"></rzslider>
+  </div>
+</action-sheet>

www/views/preferencesLogs.html

@@ -1,8 +1,13 @@
-<ion-view class="settings" show-tabs>
+<ion-view class="settings" hide-tabs>
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Session Log' | translate}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
+    <ion-nav-buttons side="secondary">
+      <button class="button back-button" ng-click="showOptionsMenu()">
+        <i class="icon ion-ios-more"></i>
+      </button>
+    </ion-nav-buttons>
   </ion-nav-bar>
   <ion-content>
     <div class="settings-button-group">
@@ -14,10 +19,10 @@
       </button>
     </div>
     <div class="list">
-      <div class="item item-text-wrap enable_text_select">
+      <div class="item item-text-wrap enable_text_select log-text">
         <ul>
-          <li ng-repeat="l in logs">
-            <span ng-class="{'energized': l.level=='warn', 'dark': l.level=='debug', 'positive': l.level=='info', 'assertive': l.level=='error' }">
+          <li ng-repeat="l in filteredLogs">
+            <span ng-class="{'energized': l.level=='warn', 'dark': l.level=='debug', 'positive': l.level=='info', 'assertive': l.level=='error'}">
               {{l.msg}}
             </span>
           </li>
@@ -25,4 +30,9 @@
       </div>
     </div>
   </ion-content>
+  <log-options
+    log-options-title="logOptionsTitle"
+    log-options-show="showOptions"
+    log-options="logOptions">
+  </log-options>
 </ion-view>