Prowlarr-Prowlarr/src/UI/System/Logs/Table/LogsTableLayout.js

var vent = require('vent');
var Marionette = require('marionette');
var Backgrid = require('backgrid');
var LogTimeCell = require('./LogTimeCell');
var LogLevelCell = require('./LogLevelCell');
var LogRow = require('./LogRow');
var GridPager = require('../../../Shared/Grid/Pager');
var LogCollection = require('../LogsCollection');
var ToolbarLayout = require('../../../Shared/Toolbar/ToolbarLayout');
var LoadingView = require('../../../Shared/LoadingView');
require('../../../jQuery/jquery.spin');

module.exports = Marionette.Layout.extend({
    template         : 'System/Logs/Table/LogsTableLayoutTemplate',
    regions          : {
        grid    : '#x-grid',
        toolbar : '#x-toolbar',
        pager   : '#x-pager'
    },
    attributes       : {id : 'logs-screen'},
    columns          : [{
        name     : 'level',
        label    : '',
        sortable : true,
        cell     : LogLevelCell
    }, {
        name     : 'logger',
        label    : 'Component',
        sortable : true,
        cell     : Backgrid.StringCell.extend({className : 'log-logger-cell'})
    }, {
        name     : 'message',
        label    : 'Message',
        sortable : false,
        cell     : Backgrid.StringCell.extend({className : 'log-message-cell'})
    }, {
        name  : 'time',
        label : 'Time',
        cell  : LogTimeCell
    }],
    initialize       : function(){
        this.collection = new LogCollection();
        this.listenTo(this.collection, 'sync', this._showTable);
        this.listenTo(vent, vent.Events.CommandComplete, this._commandComplete);
    },
    onRender         : function(){
        this.grid.show(new LoadingView());
    },
    onShow           : function(){
        this._showToolbar();
    },
    _showTable       : function(){
        this.grid.show(new Backgrid.Grid({
            row        : LogRow,
            columns    : this.columns,
            collection : this.collection,
            className  : 'table table-hover'
        }));
        this.pager.show(new GridPager({
            columns    : this.columns,
            collection : this.collection
        }));
    },
    _showToolbar     : function(){
        var filterButtons = {
            type          : 'radio',
            storeState    : true,
            menuKey       : 'logs.filterMode',
            defaultAction : 'all',
            items         : [{
                key      : 'all',
                title    : '',
                tooltip  : 'All',
                icon     : 'icon-circle-blank',
                callback : this._setFilter
            }, {
                key      : 'info',
                title    : '',
                tooltip  : 'Info',
                icon     : 'icon-info',
                callback : this._setFilter
            }, {
                key      : 'warn',
                title    : '',
                tooltip  : 'Warn',
                icon     : 'icon-warn',
                callback : this._setFilter
            }, {
                key      : 'error',
                title    : '',
                tooltip  : 'Error',
                icon     : 'icon-error',
                callback : this._setFilter
            }]
        };
        var leftSideButtons = {
            type       : 'default',
            storeState : false,
            items      : [{
                title        : 'Refresh',
                icon         : 'icon-refresh',
                ownerContext : this,
                callback     : this._refreshTable
            }, {
                title   : 'Clear Logs',
                icon    : 'icon-trash',
                command : 'clearLog'
            }]
        };
        this.toolbar.show(new ToolbarLayout({
            left    : [leftSideButtons],
            right   : [filterButtons],
            context : this
        }));
    },
    _refreshTable    : function(buttonContext){
        this.collection.state.currentPage = 1;
        var promise = this.collection.fetch({reset : true});
        if(buttonContext) {
            buttonContext.ui.icon.spinForPromise(promise);
        }
    },
    _setFilter       : function(buttonContext){
        var mode = buttonContext.model.get('key');
        this.collection.setFilterMode(mode, {reset : false});
        this.collection.state.currentPage = 1;
        var promise = this.collection.fetch({reset : true});
        if(buttonContext) {
            buttonContext.ui.icon.spinForPromise(promise);
        }
    },
    _commandComplete : function(options){
        if(options.command.get('name') === 'clearlog') {
            this._refreshTable();
        }
    }
});