big_query_log_viewer 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 630d53dfd36e95d3a96822530d80f5cb00de1761
+  data.tar.gz: bebe698a4d02b570204b425b7d6667d31d19780e
+SHA512:
+  metadata.gz: 11a067c1f173f439bb56d35240cea08522b37a184b08af16b6bf07ce2f13afac14b33f5fb846704a9004897705ceaece23547c49d00d4fcc5e6bbf3db0a6f0de
+  data.tar.gz: bf5de5515ae6664f8c9f8770cf041309b8c9e9d736cebed026acd915b0bd2539c425ae470bcc04521012deef68e3df996782f67e95d1fc8f7fca2d14fc6622c8

data/LICENSE.txt

@@ -0,0 +1,23 @@
+
+Copyright (c) 2015 Aha! Labs Inc
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,49 @@
+# BigQueryLogViewer
+
+A simple Rails engine and React app to search logs stored in Google BigQuery.
+
+![BigQuery Log Viewer](https://cloud.githubusercontent.com/assets/1896112/9646564/7877bcda-519a-11e5-8bfb-bc34dc93de9e.png)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'big_query_log_viewer'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install big_query_log_viewer
+
+## Usage
+
+Run the generator to create your initialization file:
+
+    $ rails generate big_query_log_viewer:install
+
+Open the newly created file, `config/initializers/big_query_log_viewer.rb`, and add your client ID, project number, and table prefix from the [Google Developer Console](https://console.developers.google.com).
+
+Finally, mount the engine by adding the following to your application's `routes.rb`: 
+
+`mount BigQueryLogViewer::Engine, at: '/some_url'`
+
+## Linting
+
+The project uses [coffeelint](http://www.coffeelint.org/) to maintain quality CoffeeScript syntax. It is configured to run as the default rake task.
+
+## Authorship
+
+Written by Zach Schneider, based on prototype by Chris Waters, for [Aha!, the world's #1 product roadmap software](http://www.aha.io/)
+
+## Contributing
+
+1. Fork it ( https://github.com/aha-app/bigquery-log-viewer/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,19 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+load 'rails/tasks/statistics.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'coffeelint'
+
+task :coffeelint do
+  Coffeelint.lint_dir(File.join('app', 'assets', 'javascripts', 'big_query_log_viewer')) do |filename, lint_report|
+      Coffeelint.display_test_results(filename, lint_report)
+  end
+end
+
+task default: :coffeelint

data/app/assets/javascripts/big_query_log_viewer/application.coffee

@@ -0,0 +1,40 @@
+#= require react
+#= require jquery
+
+#= require ./components/tab_manager
+
+window.BigQueryLogViewer ||= {}
+
+TabManager = BigQueryLogViewer.TabManager
+
+class BigQueryLogViewer.App
+  constructor: (@projectId, @clientId, @tablePrefix, @rowsPerPage) ->
+    config =
+      'client_id': @clientId,
+      'scope': 'https://www.googleapis.com/auth/bigquery'
+      immediate: true
+
+    # Perform authentication.
+    gapi.auth.authorize(config, (result) ->
+      if result.error
+        config.immediate = false
+        $('#authenticate-btn').show()
+        $('#authenticate-btn').on 'click', ->
+          gapi.auth.authorize(config, (result) ->
+            unless result.error
+              gapi.client.load('bigquery', 'v2')
+              $('#application').fadeIn()
+              $('#authenticate-btn').hide()
+          )
+      else
+        gapi.client.load('bigquery', 'v2')
+        $('#application').fadeIn()
+        $('#authenticate-btn').hide()
+    )
+
+    # Create React element.
+    props =
+      projectId: @projectId
+      tablePrefix: @tablePrefix
+      rowsPerPage: @rowsPerPage
+    React.render(React.createElement(TabManager, props), $('#application')[0])

data/app/assets/javascripts/big_query_log_viewer/components/pagination.coffee

@@ -0,0 +1,35 @@
+###* @jsx React.DOM ###
+
+window.BigQueryLogViewer ||= {}
+
+BigQueryLogViewer.Pagination = React.createClass
+  render: ->
+    removeNode =
+      if @props.type == 'top'
+        <span className={'remove-wrapper'} onClick={@props.handleTabDelete}>
+          <i className={'icon icon-remove'}></i>
+        </span>
+
+    tabs =
+      for tab in @props.tabs
+        <li key={tab.key} onClick={tab.handler || @props.handleTabSwitch} className={'active' if tab.active}>
+          <a href={'#'}>
+            <span dangerouslySetInnerHTML={__html: tab.title} />
+            {removeNode}
+          </a>
+        </li>
+
+    if @props.type == 'top'
+      return (
+        <ul className={'nav nav-tabs'}>
+          {tabs}
+        </ul>
+      )
+    else
+      return (
+        <div className={'pagination'}>
+          <ul>
+            {tabs}
+          </ul>
+        </div>
+      )

data/app/assets/javascripts/big_query_log_viewer/components/row.coffee

@@ -0,0 +1,55 @@
+###* @jsx React.DOM ###
+
+window.BigQueryLogViewer ||= {}
+
+BigQueryLogViewer.Row = React.createClass
+  getInitialState: ->
+    s = "000#{@props.row.timestamp.getMilliseconds()}"
+    y = @props.row.timestamp.getFullYear()
+    mo = ('0' + @props.row.timestamp.getMonth()).slice(-2)
+    d = ('0' + @props.row.timestamp.getDate()).slice(-2)
+    h = ('0' + @props.row.timestamp.getHours()).slice(-2)
+    mi = ('0' + @props.row.timestamp.getMinutes()).slice(-2)
+    se = ('0' + @props.row.timestamp.getSeconds()).slice(-2)
+    {
+      tss: "#{y}-#{mo}-#{d} #{h}:#{mi}:#{se}"
+      tsm: s.substr(s.length - 3)
+    }
+  handleShowMore: (e) ->
+    e.preventDefault()
+    $(@getDOMNode()).find('.collapsed-string').show()
+    $(@getDOMNode()).find('.expand-row').hide()
+    
+  handleShowProximity: (e) ->
+    e.preventDefault()
+    @props.handleShowProximity(@props.row)
+  
+  render: ->
+    row = @props.row
+
+    collapsedMsg = 
+      if row.msg.length > 200
+        <span>{row.msg.substring(0,200)}...<a href='#' className='expand-row' onClick={@handleShowMore}>expand</a><span className='collapsed-string'>{row.msg.substring(200)}</span></span>
+      else
+        row.msg
+
+    if @props.type == 'results'
+      return (
+        <tr>
+          <td className='column-controls' onClick={@handleShowProximity}><i className='icon icon-external-link'></i></td>
+          <td className='column-ts'>{@state.tss}<span className='ts-milliseconds'>.{@state.tsm}</span></td>
+          <td className='column-host'>{row.host}</td>
+          <td className='column-pid'>{row.pid}</td>
+          <td className='column-severity' data-severity={row.severity}>{row.severity}</td>
+          <td className='column-msg'><pre>{collapsedMsg}</pre></td>
+        </tr>
+      )
+    else
+      return (
+        <tr className={'highlight-row' if @props.highlighted}>
+          <td className='column-ts'>{@state.tss}<span className='ts-milliseconds'>.{@state.tsm}</span></td>
+          <td className='column-rid'>{row.rid}</td>
+          <td className='column-severity' data-severity={row.severity}>{row.severity}</td>
+          <td className='column-msg'><pre>{collapsedMsg}</pre></td>
+        </tr>
+      )

data/app/assets/javascripts/big_query_log_viewer/components/search_box.coffee

@@ -0,0 +1,20 @@
+###* @jsx React.DOM ###
+
+window.BigQueryLogViewer ||= {}
+
+BigQueryLogViewer.SearchBox = React.createClass
+  handleSearch: (e) -> 
+    e.preventDefault()
+    @props.handleSearch(@refs.searchInput.getDOMNode().value, @refs.startDate.getDOMNode().value, @refs.endDate.getDOMNode().value)
+
+  render: ->
+    return (
+      <form className='navbar-form search-box form-inline' onSubmit={@handleSearch}>
+        <div className='controls'>
+          <input ref='searchInput' placeholder={'Term'} />
+          Start Date: <input ref='startDate' type='date' />
+          End Date: <input ref='endDate' type='date' />
+          <input type='submit' value='Search' className='btn btn-primary' />
+        </div>
+      </form>
+    )

data/app/assets/javascripts/big_query_log_viewer/components/search_status.coffee

@@ -0,0 +1,18 @@
+###* @jsx React.DOM ###
+
+window.BigQueryLogViewer ||= {}
+
+BigQueryLogViewer.SearchStatus = React.createClass
+  render: ->
+    if @props.queryInProgress
+      progress = <span>Query running...</span>
+    else if @props.errorMessage
+      progress = <span className='error'>{@props.errorMessage}</span>      
+    else if !@props.queryInProgress and @props.numReturnedResults?
+      results = <span>Found {@props.numReturnedResults} results</span>
+    return (
+      <div className='query-status'>
+        {progress}
+        {results}
+      </div>
+    )

data/app/assets/javascripts/big_query_log_viewer/components/tab.coffee

@@ -0,0 +1,275 @@
+###* @jsx React.DOM ###
+
+#= require ./pagination
+#= require ./row
+
+window.BigQueryLogViewer ||= {}
+
+Pagination = BigQueryLogViewer.Pagination
+Row = BigQueryLogViewer.Row
+
+BigQueryLogViewer.Tab = React.createClass
+  getInitialState: ->
+    {
+      pages: [@props.tab.rowData]
+      activePageIndex: 0
+      pageToken: @props.tab.pageToken
+      showPrevLink: true
+      showNextLink: true
+      currentNextPage: 0
+      currentPrevPage: 0
+    }
+
+  resultsTab: ->
+    @props.tab.type is 'results'
+
+  expansionTab: ->
+    @props.tab.type is 'expansion'
+
+  highlighted: (row) ->
+    @expansionTab() && @props.tab.row.rid is row.rid
+
+  prevTitle: ->
+    if @resultsTab() then 'Prev' else 'More'
+
+  nextTitle: ->
+    if @resultsTab() then 'Next' else 'More'
+
+  handleNextPage: ->
+    if @state.activePageIndex + 1 < @state.pages.length
+      # Page has already been loaded, just activate it
+      @setState(activePageIndex: @state.activePageIndex + 1)
+    else if @resultsTab()
+      # Else load next page from Google.
+      @props.query.executeListQuery({pageToken: @state.pageToken, jobId: @props.tab.jobId}, (response) =>
+        rows =
+          for r in response.rows
+            {
+              timestamp: new Date(1000 * r.f[0].v)
+              host: r.f[4].v
+              pid: r.f[3].v
+              rid: parseInt(r.f[1].v)
+              severity: r.f[2].v
+              msg: r.f[5].v
+            }
+        @state.pages.push(rows)
+        @setState(
+          pageToken: response.pageToken
+          activePageIndex: @state.activePageIndex + 1
+        )
+
+      , (response) =>
+        console.log "ERROR: #{response.message}; entire response follows"
+        console.log response
+        alert 'Error loading more rows; check console for more information'
+      )
+    else if @expansionTab()
+      # Load additional context.
+      startRow = @props.tab.row.rid + @props.rowsPerPage / 2 + @state.currentNextPage * @props.rowsPerPage
+      endRow = @props.tab.row.rid + @props.rowsPerPage / 2 + (@state.currentNextPage + 1) * @props.rowsPerPage
+
+      # Construct query.
+      conds = [
+        {
+          field: 'host'
+          method: 'equals'
+          type: 'string'
+          value: @props.tab.row.host
+        }
+        {
+          field: 'pid'
+          method: 'equals'
+          type: 'int'
+          value: @props.tab.row.pid
+        }
+        {
+          field: 'rid'
+          method: 'between'
+          firstValue: startRow
+          secondValue: endRow
+        }
+      ]
+      query = @props.query.buildQuery(@props.tab.source.startDate, @props.tab.source.endDate, conds, 'ts, rid desc')
+
+      @props.query.executeQuery(query, {maxResults: @props.rowsPerPage}, (response) =>
+        # Mark no more next if there were no results.
+        if parseInt(response.totalRows) == 0
+          @setState(showNextLink: false)
+          return
+
+        # Create new page for the expansion.
+        rows =
+          for r in response.rows
+            {
+              timestamp: new Date(1000 * r.f[0].v)
+              host: r.f[4].v
+              pid: r.f[3].v
+              rid: parseInt(r.f[1].v)
+              severity: r.f[2].v
+              msg: r.f[5].v
+            }
+
+        @state.pages[0] = @state.pages[0].concat(rows)
+        @setState(currentNextPage: @state.currentNextPage + 1)
+
+      , (reponse) =>
+        console.log "ERROR: #{response.message}; entire response follows"
+        console.log response
+        alert 'Error finding more context; check console for more information'
+      )
+
+  handlePrevPage: ->
+    if @resultsTab()
+      @setState(activePageIndex: @state.activePageIndex - 1)
+    else if @expansionTab()
+      # Load additional context.
+      startRow = @props.tab.row.rid - @props.rowsPerPage / 2 - @state.currentPrevPage * @props.rowsPerPage
+      endRow = @props.tab.row.rid - @props.rowsPerPage / 2 - (@state.currentPrevPage + 1) * @props.rowsPerPage
+
+      # Construct query.
+      conds = [
+        {
+          field: 'host'
+          method: 'equals'
+          type: 'string'
+          value: @props.tab.row.host
+        }
+        {
+          field: 'pid'
+          method: 'equals'
+          type: 'int'
+          value: @props.tab.row.pid
+        }
+        {
+          field: 'rid'
+          method: 'between'
+          firstValue: startRow
+          secondValue: endRow
+        }
+      ]
+      query = @props.query.buildQuery(@props.tab.source.startDate, @props.tab.source.endDate, conds, 'ts, rid desc')
+
+      @props.query.executeQuery(query, {maxResults: @props.rowsPerPage}, (response) =>
+        # Mark no more prev if there were no results.
+        if parseInt(response.totalRows) == 0
+          @setState(showPrevLink: false)
+          return
+
+        # Create new page for the expansion.
+        rows =
+          for r in response.rows
+            {
+              timestamp: new Date(1000 * r.f[0].v)
+              host: r.f[4].v
+              pid: r.f[3].v
+              rid: parseInt(r.f[1].v)
+              severity: r.f[2].v
+              msg: r.f[5].v
+            }
+
+        @state.pages[0] = rows.concat(@state.pages[0])
+        @setState(currentPrevPage: @state.currentPrevPage + 1)
+
+      , (reponse) =>
+        console.log "ERROR: #{response.message}; entire response follows"
+        console.log response
+        alert 'Error finding more context; check console for more information'
+      )
+
+  handleShowPage: (event) ->
+    @setState(activePageIndex: parseInt(event.dispatchMarker.split('pagination-link-')[1]))
+
+  componentDidMount: ->
+    if @expansionTab()
+      window.requestAnimationFrame =>
+        node = @getDOMNode()
+        node.scrollTop = $(node).find('.highlight-row').offset().top
+
+  componentDidUpdate: ->
+    node = $(@getDOMNode())
+    maxHeight = $(window).height() - node.offset().top - 40
+    node.css('max-height', maxHeight)
+
+  render: ->
+    showProximity = @props.showProximity
+    tab = @props.tab
+
+    rows =
+      for row in @state.pages[@state.activePageIndex]
+        <Row key={"#{row.pid}-#{row.rid}"} row={row} type={@props.tab.type} highlighted={@highlighted(row)} handleShowProximity={@props.handleShowProximity} />
+
+    # Generate pagination.
+    if @resultsTab()
+      pagination = []
+
+      if @state.activePageIndex > 0 || (@expansionTab() && @state.showPrevLink)
+        pagination.push(
+          title: @prevTitle()
+          active: false
+          key: 'pagination-link-prev'
+          handler: @handlePrevPage
+        )
+
+      for page, index in @state.pages
+        pagination.push(
+          title: (index + 1)
+          active: index == @state.activePageIndex
+          key: "pagination-link-#{index}"
+          handler: @handleShowPage
+        )
+
+      if @state.activePageIndex + 1 < @state.pages.length || (@resultsTab() && @state.pageToken) || (@expansionTab() && @state.showNextLink)
+        pagination.push(
+          title: @nextTitle()
+          active: false
+          key: 'pagination-link-next'
+          handler: @handleNextPage
+        )
+
+    head =
+      if @resultsTab()
+        <thead>
+          <tr>
+            <th></th>
+            <th>Timestamp</th>
+            <th>Host</th>
+            <th>PID</th>
+            <th>Severity</th>
+            <th>Message</th>
+          </tr>
+        </thead>
+      else
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>RID</th>
+            <th>Severity</th>
+            <th>Message</th>
+          </tr>
+        </thead>
+
+    pagination =
+      if @resultsTab()
+        <Pagination type={'inside'} tabs={pagination} handleTabSwitch={@handleTabSwitch} />
+
+    showMoreTop =
+      if @expansionTab() && @state.showPrevLink
+        <a href={'#'} onClick={@handlePrevPage}>More</a>
+
+    showMoreBottom =
+      if @expansionTab() && @state.showNextLink
+        <a href={'#'} onClick={@handleNextPage}>More</a>
+
+    return (
+      <div className={'hidden' unless @props.visible}>
+        {showMoreTop}
+        <table className={'table row-viewer'}>
+          {head}
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+        {pagination}
+        {showMoreBottom}
+      </div>
+    )

data/app/assets/javascripts/big_query_log_viewer/components/tab_manager.coffee

@@ -0,0 +1,216 @@
+###* @jsx React.DOM ###
+
+#= require ../utils/query
+
+#= require ./tab
+#= require ./search_box
+#= require ./search_status
+#= require ./pagination
+
+window.BigQueryLogViewer ||= {}
+
+Tab = BigQueryLogViewer.Tab
+SearchBox = BigQueryLogViewer.SearchBox
+SearchStatus = BigQueryLogViewer.SearchStatus
+Pagination = BigQueryLogViewer.Pagination
+
+Query = BigQueryLogViewer.Query
+
+BigQueryLogViewer.TabManager = React.createClass
+  getInitialState: ->
+    @query = new BigQueryLogViewer.Query(@props.projectId, @props.tablePrefix, @props.rowsPerPage)
+
+    {
+      tabs: []
+      activeTabIndex: null
+      queryInProgress: false
+      numReturnedResults: null
+      errorMessage: null
+    }
+
+  activeTab: ->
+    @state.tabs[@state.activeTabIndex]
+
+  findResultsTab: (term, startDate, endDate) ->
+    (index for tab, index in @state.tabs when tab.type == 'results' && tab.term is term && tab.startDate is startDate && tab.endDate == endDate)[0]
+
+  findExpansionTab: (rid) ->
+    (index for tab, index in @state.tabs when tab.type == 'expansion' && tab.source == @activeTab() && tab.rid is rid)[0]
+
+  handleSearch: (searchTerm, startDate, endDate) ->
+    return if searchTerm == ''
+    startDate = null if startDate == ''
+    endDate = null if endDate == ''
+
+    # Check that valid dates are entered.
+    if (startDate == null) && (endDate != null) || (startDate != null) && (endDate == null)
+      alert 'Must fill in both or neither of start and end dates'
+      return
+    
+    # Check to see if we've already searched this term.
+    if (foundTab = @findResultsTab(searchTerm, startDate, endDate)) != undefined
+      @setState(activeTabIndex: foundTab)
+      return
+
+    @setState(queryInProgress: true)
+    
+    # Construct query.
+    conds = [
+      {
+        field: 'msg'
+        method: 'contains'
+        value: searchTerm
+      }
+    ]
+    query = @query.buildQuery(startDate, endDate, conds, 'ts desc')
+
+    @query.executeQuery(query, {}, (response) =>
+      # Create new tab for the results.
+      unless parseInt(response.totalRows) == 0
+        rows =
+          for r in response.rows
+            {
+              timestamp: new Date(1000 * r.f[0].v)
+              host: r.f[4].v
+              pid: r.f[3].v
+              rid: parseInt(r.f[1].v)
+              severity: r.f[2].v
+              msg: r.f[5].v
+            }
+
+        tab =
+          type: 'results'
+          rowData: rows
+          pageToken: response.pageToken
+          jobId: response.jobReference.jobId
+          term: searchTerm
+          startDate: startDate
+          endDate: endDate
+
+        position = if @state.activeTabIndex != null then @state.activeTabIndex + 1 else 0
+        @state.tabs.splice(position, 0, tab)
+        @setState(activeTabIndex: position)
+
+      # Update view component.
+      @setState
+        queryInProgress: false
+        numReturnedResults: response.totalRows
+        errorMessage: null
+    , (response) =>
+      @setState
+        queryInProgress: false
+        numReturnedResults: 0
+        errorMessage: response.message
+    )
+
+  handleShowProximity: (row) ->
+    # Check to see if we've already queried this row proximity.
+    if (foundTab = @findExpansionTab(row.rid)) != undefined
+      @setState(activeTabIndex: foundTab)
+      return
+
+    @setState(queryInProgress: true)
+
+    # Construct query.
+    conds = [
+      {
+        field: 'host'
+        method: 'equals'
+        type: 'string'
+        value: row.host
+      }
+      {
+        field: 'pid'
+        method: 'equals'
+        type: 'int'
+        value: row.pid
+      }
+      {
+        field: 'rid'
+        method: 'between'
+        firstValue: row.rid - @props.rowsPerPage / 2
+        secondValue: row.rid + @props.rowsPerPage / 2
+      }
+    ]
+    query = @query.buildQuery(@activeTab().startDate, @activeTab().endDate, conds, 'ts, rid desc')
+
+    @query.executeQuery(query, {maxResults: 101}, (response) =>
+      # Create new tab for the expansion.
+      rows =
+        for r in response.rows
+          {
+            timestamp: new Date(1000 * r.f[0].v)
+            host: r.f[4].v
+            pid: r.f[3].v
+            rid: parseInt(r.f[1].v)
+            severity: r.f[2].v
+            msg: r.f[5].v
+          }
+      tab =
+        type: 'expansion'
+        rowData: rows
+        row: row
+        source: @activeTab()
+        term: @activeTab().term
+      position = if @state.activeTabIndex != null then @state.activeTabIndex + 1 else 0
+      @state.tabs.splice(position, 0, tab)
+      @setState(activeTabIndex: position)
+
+      # Update the view component.
+      @setState
+        queryInProgress: false
+        numReturnedResults: response.totalRows
+        errorMessage: null
+    , (reponse) =>
+      console.log "ERROR: #{response.message}; entire response follows"
+      console.log response
+      alert 'Error finding nearby rows; check console for more information'
+    )
+
+  handleTabSwitch: (event) ->
+    @setState(activeTabIndex: parseInt(event.dispatchMarker.split('tab-name-')[1]))
+
+  handleTabDelete: (event) ->
+    index = parseInt(event.dispatchMarker.split('tab-name-')[1])
+
+    newIndex = 
+      if index <= @state.activeTabIndex
+        if @state.activeTabIndex > 0
+          @state.activeTabIndex - 1
+        else
+          null
+      else
+        @state.activeTabIndex
+
+    @state.tabs.splice(index, 1)
+    @setState(activeTabIndex: newIndex)
+
+  render: ->
+    # Create tab list for pagination.
+    pagination =
+      for tab, index in @state.tabs
+        title = tab.term
+        title = "<i class='icon icon-external-link'></i> #{title}" if tab.type == 'expansion'
+
+        {
+          title: title
+          active: index == @state.activeTabIndex
+          key: "tab-name-#{index}"
+        }
+
+    tabs =
+      for tab, index in @state.tabs
+        <Tab key={"tab-#{index}"} tab={tab} query={@query} visible={index == @state.activeTabIndex} handleShowProximity={@handleShowProximity} rowsPerPage={@props.rowsPerPage} />
+
+    return (
+      <div>
+        <div>
+          <SearchBox handleSearch={@handleSearch} />
+          <SearchStatus queryInProgress={@state.queryInProgress} numReturnedResults={@state.numReturnedResults} errorMessage={@state.errorMessage} />
+          <Pagination type={'top'} tabs={pagination} handleTabSwitch={@handleTabSwitch} handleTabDelete={@handleTabDelete} />
+        </div>
+        <div className={'tabs'}>
+          {tabs}
+        </div>
+      </div>
+    )

data/app/assets/javascripts/big_query_log_viewer/utils/query.coffee

@@ -0,0 +1,61 @@
+window.BigQueryLogViewer ||= {}
+
+class BigQueryLogViewer.Query
+  constructor: (@projectId, @tablePrefix, @rowsPerPage) ->
+    #
+
+  tableRange: (startDate='CURRENT_TIMESTAMP()', endDate='CURRENT_TIMESTAMP()') ->
+    startDate = "TIMESTAMP('#{startDate} 00:00:00')" unless startDate == "CURRENT_TIMESTAMP()"
+    endDate = "TIMESTAMP('#{endDate} 23:59:59')" unless endDate == "CURRENT_TIMESTAMP()"
+
+    "(SELECT * FROM TABLE_DATE_RANGE(logs.#{@tablePrefix}_, #{startDate}, #{endDate}))"
+
+  buildQuery: (startDate, endDate, conds, order) ->
+    # Construct conditions.
+    conds =
+      for cond in conds
+        value = cond.value.replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0') if cond.value
+        switch cond.method
+          when 'contains' then "#{cond.field} contains '#{value}'"
+          when 'equals'
+            if cond.type == 'string'
+              "#{cond.field} = '#{value}'"
+            else
+              "#{cond.field} = #{value}"
+          when 'between' then "#{cond.field} between #{cond.firstValue} and #{cond.secondValue}"
+
+    q = "SELECT ts, rid, sev, pid, host, msg FROM #{@tableRange(startDate, endDate)}"
+    q = "#{q} WHERE #{conds.join(' AND ')}" if conds.length > 0
+    q = "#{q} ORDER BY #{order}" if order
+    q
+
+  executeQuery: (query, config, success, error) ->
+    console.log("Executing query: #{query}")
+    config.maxResults ?= @rowsPerPage
+    request = gapi.client.bigquery.jobs.query
+      projectId: @projectId
+      timeoutMs: 30000
+      maxResults: config.maxResults
+      query: query
+
+    request.execute (response) ->
+      if response.error
+        error(response) if error?
+      else
+        success(response) if success?
+
+  executeListQuery: (config, success, error) ->
+    console.log('Executing list query')
+    config.maxResults ?= @rowsPerPage
+    request = gapi.client.bigquery.jobs.getQueryResults
+      projectId: @projectId
+      jobId: config.jobId
+      timeoutMs: 30000
+      maxResults: config.maxResults
+      pageToken: config.pageToken
+
+    request.execute (response) ->
+      if response.error
+        error(response) if error?
+      else
+        success(response) if success?

data/app/assets/stylesheets/big_query_log_viewer/application.css.less

@@ -0,0 +1,161 @@
+/*
+ *= require twitter/bootstrap
+ *= require font-awesome
+ */
+
+body {
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  padding: 25px;
+  padding-top: 5px;
+  margin: 0px;
+}
+
+.wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+a {
+  color: #ccc;
+}
+
+.hidden {
+  display: none;
+}
+
+#authenticate-btn, #application {
+  display: none;
+}
+
+.controls {
+  input {
+    margin-right: 5px;
+    padding: 3px;
+    border-radius: 3px;
+
+    &[type=date] {
+      width: 150px;
+    }
+  }
+
+  span {
+    vertical-align: middle;
+  }
+}
+
+ul.nav {
+  margin-bottom: 0px;
+
+  li {
+    span.remove-wrapper {
+      display: inline-block;
+      width: 15px;
+
+      i.icon-remove {
+        margin-left: 5px;
+        cursor: pointer;
+        display: none;
+      }
+    }
+
+    &:hover span.remove-wrapper i.icon-remove {
+      display: inline-block;
+    }
+  }
+}
+
+.tabs {
+  padding: 10px;
+
+  >div {
+    overflow-y: scroll;
+  }
+}
+
+.query-status {
+  margin: 5px;
+  margin-top: 10px;
+  .error {
+    color: #C55050;
+  }
+}
+
+.row-viewer {
+  border-collapse: collapse;
+
+  td {
+    padding: 2px 4px;
+    vertical-align: top;
+  }
+
+  .column-controls {
+    i {
+      opacity: 0;
+    }
+  }
+  tr:hover {
+    .column-controls {
+      i {
+        opacity: 1;
+      }
+      cursor: pointer;
+    }
+  }
+  .column-ts {
+    white-space: nowrap;
+    .ts-milliseconds {
+      color: #777;
+    }
+  }
+  .column-host {
+    color: #333;
+  }
+  .column-pid, .column-rid {
+    color: rgb(163, 158, 56);
+  }
+  .column-severity {
+    &[data-severity=DEBUG] {
+      color: #999;
+    }
+    &[data-severity=INFO] {
+      color: rgb(135, 135, 176);
+    }
+    &[data-severity=WARN] {
+      color: yellow;
+    }
+    &[data-severity=ERROR] {
+      color: orange;
+    }
+    &[data-severity=FATAL] {
+      color: red;
+    }
+  }
+  .column-msg {
+    pre {
+      white-space: normal;
+      word-break: break-all;
+      margin: 0;
+      line-height: 16px;
+    }
+  }
+
+  .proximity-row {
+    display: none;
+    td {
+      background-color: #454545;
+    }
+  }
+  
+  .collapsed-string {
+    display: none;
+  }
+  .expand-row {
+    padding-left: 10px;
+    color: #aaa;
+  }
+
+  .highlight-row {
+    background-color: #FFCCCC;
+  }
+}

data/app/controllers/big_query_log_viewer/application_controller.rb

@@ -0,0 +1,3 @@
+module BigQueryLogViewer
+  class ApplicationController < ActionController::Base; end
+end

data/app/views/big_query_log_viewer/application/index.html.erb

@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+  <title>Log viewer</title>
+
+  <%= stylesheet_link_tag 'big_query_log_viewer/application' %>
+  <%= javascript_include_tag 'big_query_log_viewer/application' %>
+
+  <script type='text/javascript'>
+    function init() { 
+      var projectNumber = '<%= BigQueryLogViewer.project_number %>'
+      var clientId = '<%= BigQueryLogViewer.client_id %>'
+      var tablePrefix = '<%= BigQueryLogViewer.table_prefix %>'
+      var rowsPerPage = parseInt('<%= BigQueryLogViewer.rows_per_page %>')
+      BigQueryLogViewer.app = new BigQueryLogViewer.App(projectNumber, clientId, tablePrefix, rowsPerPage)
+    }
+  </script>
+
+  <%= javascript_include_tag 'https://apis.google.com/js/client.js?onload=init' %>
+</head>
+
+<body>
+  <div class='wrapper'>
+    <button id='authenticate-btn' class='btn btn-default'>Authenticate</button>
+    <div id='application'></div>
+  </div>
+</body>
+</html>

data/config/coffeelint.json

@@ -0,0 +1,10 @@
+{
+  "coffeescript_error": {
+    "level": "ignore"
+  },
+  "max_line_length": {
+    "value": 100,
+    "level": "error",
+    "limitComments": true
+  }
+}

data/config/routes.rb

@@ -0,0 +1,3 @@
+BigQueryLogViewer::Engine.routes.draw do
+  get '/', to: 'application#index'
+end

data/lib/big_query_log_viewer.rb

@@ -0,0 +1,5 @@
+require 'big_query_log_viewer/engine'
+
+module BigQueryLogViewer
+  mattr_accessor :project_number, :client_id, :table_prefix, :rows_per_page
+end

data/lib/big_query_log_viewer/engine.rb

@@ -0,0 +1,9 @@
+module BigQueryLogViewer
+  class Engine < ::Rails::Engine
+    isolate_namespace BigQueryLogViewer
+    
+    require 'less-rails'
+    require 'react-rails'
+    require 'jquery-rails'
+  end
+end

data/lib/big_query_log_viewer/version.rb

@@ -0,0 +1,3 @@
+module BigQueryLogViewer
+  VERSION = '0.0.4'
+end

data/lib/generators/big_query_log_viewer/install_generator.rb

@@ -0,0 +1,15 @@
+require 'rails/generators/base'
+
+module BigQueryLogViewer
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('../../templates', __FILE__)
+
+      desc 'Creates a BigQueryLogViewer initializer.'
+
+      def copy_initializer
+        template 'big_query_log_viewer.rb', 'config/initializers/big_query_log_viewer.rb'
+      end
+    end
+  end
+end

data/lib/generators/templates/big_query_log_viewer.rb

@@ -0,0 +1,15 @@
+# Configuration settings for BigQueryLogViewer.
+
+# Your client ID from the Google developer console.
+BigQueryLogViewer.client_id = ''
+
+# Your project number from the Google developer console.
+BigQueryLogViewer.project_number = ''
+
+# The prefix of your table.
+# Assumes the suffix is the log date - so if each table is named as 'app_logs_YYYY-MM-DD' 
+# then you would put 'app_logs' here
+BigQueryLogViewer.table_prefix = ''
+
+# The number of rows to display on each results page.
+BigQueryLogViewer.rows_per_page = 100

metadata

@@ -0,0 +1,205 @@
+--- !ruby/object:Gem::Specification
+name: big_query_log_viewer
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+platform: ruby
+authors:
+- Zach Schneider
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-09-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: therubyracer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: less-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: font-awesome-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sprockets-coffee-react
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: less-rails-bootstrap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: coffeelint
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A simple Rails engine and React app to search logs stored in Google BigQuery.
+email:
+- zach@aha.io
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/big_query_log_viewer/application.coffee
+- app/assets/javascripts/big_query_log_viewer/components/pagination.coffee
+- app/assets/javascripts/big_query_log_viewer/components/row.coffee
+- app/assets/javascripts/big_query_log_viewer/components/search_box.coffee
+- app/assets/javascripts/big_query_log_viewer/components/search_status.coffee
+- app/assets/javascripts/big_query_log_viewer/components/tab.coffee
+- app/assets/javascripts/big_query_log_viewer/components/tab_manager.coffee
+- app/assets/javascripts/big_query_log_viewer/utils/query.coffee
+- app/assets/stylesheets/big_query_log_viewer/application.css.less
+- app/controllers/big_query_log_viewer/application_controller.rb
+- app/views/big_query_log_viewer/application/index.html.erb
+- config/coffeelint.json
+- config/routes.rb
+- lib/big_query_log_viewer.rb
+- lib/big_query_log_viewer/engine.rb
+- lib/big_query_log_viewer/version.rb
+- lib/generators/big_query_log_viewer/install_generator.rb
+- lib/generators/templates/big_query_log_viewer.rb
+homepage: https://github.com/aha-app/bigquery-log-viewer
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.6
+signing_key: 
+specification_version: 4
+summary: A simple Rails engine and React app to search logs stored in Google BigQuery.
+test_files: []