app.ejs

/* global angular, $, window, io, document, hljs, ansi_up */

'use strict'

/*!
 * main js controller for webapp
 */
angular
  .module('app', [
    'ngAnimate',
    'angularMoment',
    'LocalForageModule',
    'rt.popup',
    'ui.router',
    'cfp.hotkeys'
  ])
  .config(function ($stateProvider) {
    $stateProvider.state('streams', {
      url: '/streams/:stream'
    })
  })
  .directive('resizable', function ($localForage) {
    return {
      restrict: 'A',
      link: function ($scope, $element) {
        var $window = $(window)
        var $body = $('body')
        var handler = $element.find('.resize-handler')
        var minWidth = $element.width()

        handler.on('mousedown', function () {
          $body.addClass('resizing')
          $window.on('mousemove', onMouseMove)
        })

        $window.on('mouseup', function () {
          $body.removeClass('resizing')
          $window.off('mousemove', onMouseMove)
          $localForage.setItem('sidebarWidth', $element.width())
        })

        function onMouseMove(e) {
          var width = Math.min(600, Math.max(minWidth, e.clientX))
          $element.css('width', width)
        }
      }
    }
  })
  .controller('MainController', function MainController($scope, $injector) {
    var $sce = $injector.get('$sce')
    var $localForage = $injector.get('$localForage')
    var $rootScope = $injector.get('$rootScope')
    var $state = $injector.get('$state')
    var $stateParams = $injector.get('$stateParams')
    var $streamLines = $('.stream-lines')
    var BUFFER_SIZE = 100
    var ctrl = this

    ctrl.paused = false
    ctrl.version = '<%= version %>'
    ctrl.lines = []

    /*!
     * socket stuff
     */
    ctrl.socket = io(document.location.origin, { path: document.location.pathname + 'socket.io' })

    ctrl.socket.on('connect', function () {
      console.info('connected')
      ctrl.activeStream && ctrl.socket.emit('select stream', ctrl.activeStream)
    })

    ctrl.socket.on('disconnect', function (err) {
      console.warn('disconnected: %s', err)
    })

    ctrl.socket.on('streams', function (streams) {
      ctrl.streams = streams
      $scope.$apply()
    })

    ctrl.socket.on('backlog', function (lines) {
      if (!lines) return
      ctrl.lines = lines.map(formatLine)
      $scope.$apply()
      updateScroll()
      console.info('%s: backlog received %d', ctrl.activeStream, lines.length)
    })

    ctrl.socket.on('line', function (line) {
      ctrl.lines.push(formatLine(line))

      if (ctrl.lines.length > BUFFER_SIZE) {
        ctrl.lines.length >= 100 && ctrl.lines.shift()
      }

      $scope.$apply()
      updateScroll()
    })

    ctrl.selectStream = function selectStream(stream) {
      ctrl.lines = []
      ctrl.activeStream = stream
      ctrl.socket.emit('select stream', stream)
      ctrl.resume()
      $localForage.setItem('activeStream', stream)
    }

    ctrl.isSelected = function isSelected(stream) {
      return ctrl.activeStream === stream
    }

    function updateScroll() {
      var where = ctrl.streamDirection ? $streamLines[0].scrollHeight : 0
      $streamLines.scrollTop(where)
    }

    function formatLine(line) {
      if (!line.content) {
        // handle empty line
        line.html = $sce.trustAsHtml('')
      } else if ('object' === line.type) {
        // for object just format JSON
        line.html = hljs.highlight('json', JSON.stringify(line.content, null, '  ')).value
        line.html = $sce.trustAsHtml('<pre>' + line.html + '</pre>')
      } else {
        // for log lines use ansi format
        line.html = escapeHtml(line.content)
        line.html = ansi_up.ansi_to_html(line.html, { use_classes: true })
        line.html = $sce.trustAsHtml(line.html)
      }

      return line
    }

    // https://github.com/component/escape-html/blob/master/index.js#L22
    function escapeHtml(html) {
      return String(html)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    }

    ctrl.activeStreamFilter = function activeStreamFilter(line) {
      try {
        return (new RegExp(ctrl.activeStreamRegExp)).test(line.content)
      } catch (err) {
        return true
      }
    }

    ctrl.resume = function resume() {
      if (!ctrl.paused) return
      ctrl.paused = false
      ctrl.socket.emit('select stream', ctrl.activeStream)
      $streamLines.on('wheel', ctrl.pause)
    }

    ctrl.pause = function pause() {
      if (ctrl.paused) return
      ctrl.paused = true
      ctrl.socket.emit('select stream')
      $streamLines.off('wheel', ctrl.pause)
      $scope.$apply()
    }

    $streamLines.on('wheel', ctrl.pause)

    /*!
     * settings and preferences
     */
    ctrl.toggleFavorite = function toggleFavorite(stream) {
      if (ctrl.favorites[stream]) {
        delete ctrl.favorites[stream]
      } else {
        ctrl.favorites[stream] = true
      }

      $localForage.setItem('favorites', ctrl.favorites)
    }

    ctrl.toggleTimestamp = function toggleTimestamp(stream) {
      if (ctrl.hiddenTimestamps[stream]) {
        delete ctrl.hiddenTimestamps[stream]
      } else {
        ctrl.hiddenTimestamps[stream] = true
      }

      $localForage.setItem('hiddenTimestamps', ctrl.hiddenTimestamps)
    }

    ctrl.setTheme = function setTheme(theme) {
      ctrl.theme = theme
      $localForage.setItem('theme', theme)
    }

    ctrl.setFontFamily = function setFontFamily(fontFamily) {
      ctrl.fontFamily = fontFamily
      $localForage.setItem('fontFamily', fontFamily)
    }

    ctrl.incFontSize = function incFontSize() {
      ctrl.fontSize = Math.min(7, ctrl.fontSize + 1)
      $localForage.setItem('fontSize', ctrl.fontSize)
    }

    ctrl.resetFontSize = function resetFontSize() {
      ctrl.fontSize = 4
      $localForage.setItem('fontSize', ctrl.fontSize)
    }

    ctrl.decFontSize = function decFontSize(fontSize) {
      ctrl.fontSize = Math.max(1, ctrl.fontSize - 1)
      $localForage.setItem('fontSize', fontSize)
    }

    ctrl.setStreamDirection = function setStreamDirection(streamDirection) {
      ctrl.streamDirection = streamDirection
      $localForage.setItem('streamDirection', streamDirection)
    }

    /*!
     * load storage in memory and boot
     */
    $localForage.getItem('sidebarWidth').then(function (sidebarWidth) {
      ctrl.sidebarWidth = sidebarWidth
    })

    $localForage.getItem('theme').then(function (theme) {
      ctrl.theme = theme || 'dark'
    })

    $localForage.getItem('fontFamily').then(function (fontFamily) {
      ctrl.fontFamily = fontFamily || 1
    })

    $localForage.getItem('fontSize').then(function (fontSize) {
      ctrl.fontSize = fontSize || 4
    })

    $localForage.getItem('favorites').then(function (favorites) {
      ctrl.favorites = favorites || {}
    })

    $localForage.getItem('hiddenTimestamps').then(function (hiddenTimestamps) {
      ctrl.hiddenTimestamps = hiddenTimestamps || {}
    })

    $localForage.getItem('timestampFormat').then(function (timestampFormat) {
      ctrl.timestampFormat = timestampFormat || 'MM/DD/YY hh:mm:ss'
    })

    $localForage.getItem('activeStream').then(function (activeStream) {
      if (!activeStream || ('streams' === $state.current.name && $stateParams.stream)) return
      console.info('%s: restoring session', activeStream)
      $state.go('streams', { stream: activeStream })
    })

    $localForage.getItem('streamDirection').then(function (streamDirection) {
      ctrl.streamDirection = undefined === streamDirection ? true : streamDirection
    })

    /*!
     * respond to url change
     */
    $rootScope.$on('$stateChangeStart', function (e, toState, toParams) {
      if ('streams' !== toState.name) return
      ctrl.selectStream(toParams.stream)
    })

    /*!
     * tell UI we're ready to roll
     */
    ctrl.loaded = true
  })