frontend/src/components/views/logs-browser/logs-browser.js

// Copyright 2010 - 2017 RhodeCode GmbH and the AppEnlight project authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

angular.module('appenlight.components.logsBrowserView', [])
    .component('logsBrowserView', {
        templateUrl: 'components/views/logs-browser/logs-browser.html',
        controller: LogsBrowserController
    });

LogsBrowserController.$inject = ['$location', 'stateHolder', 'typeAheadTagHelper', 'logsNoIdResource', 'sectionViewResource'];

function LogsBrowserController($location, stateHolder, typeAheadTagHelper, logsNoIdResource, sectionViewResource) {
    var vm = this;
    vm.logEventsChartConfig = {
        data: {
            json: [],
            xFormat: '%Y-%m-%dT%H:%M:%S'
        },
        color: {
            pattern: ['#6baed6', '#e6550d', '#74c476', '#fdd0a2', '#8c564b']
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            },
            y: {
                tick: {
                    count: 5,
                    format: d3.format('.2s')
                }
            }
        },
        subchart: {
            show: true,
            size: {
                height: 20
            }
        },
        size: {
            height: 250
        },
        zoom: {
            rescale: true
        },
        grid: {
            x: {
                show: true
            },
            y: {
                show: true
            }
        },
        tooltip: {
            format: {
                title: function (d) {
                    return '' + d;
                },
                value: function (v) {
                    return v
                }
            }
        }
    };
    vm.logEventsChartData = {};
    stateHolder.section = 'logs';
    vm.today = function () {
        vm.pickerDate = new Date();
    };
    vm.today();

    vm.applications = stateHolder.AeUser.applications_map;
    vm.logsPage = [];
    vm.itemCount = 0;
    vm.itemsPerPage = 250;
    vm.page = 1;
    vm.$location = $location;
    vm.isLoading = {
        logs: true,
        series: true
    };
    vm.filterTypeAheadOptions = [
        {
            type: 'message',
            text: 'message:',
            'description': 'Full-text search in your logs',
            tag: 'Message',
            example: 'message:text-im-looking-for'
        },
        {
            type: 'namespace',
            text: 'namespace:',
            'description': 'Query logs from specific namespace',
            tag: 'Namespace',
            example: "namespace:module.foo"
        },
        {
            type: 'resource',
            text: 'resource:',
            'description': 'Restrict resultset to application',
            tag: 'Application',
            example: "resource:ID"
        },
        {
            type: 'request_id',
            text: 'request_id:',
            'description': 'Show logs with specific request id',
            example: "request_id:883143dc572e4c38aceae92af0ea5ae0",
            tag: 'Request ID'
        },
        {
            type: 'level',
            text: 'level:',
            'description': 'Show entries with specific log level',
            example: 'level:warning',
            tag: 'Level'
        },
        {
            type: 'server_name',
            text: 'server_name:',
            'description': 'Show entries tagged with this key/value pair',
            example: 'server_name:hostname',
            tag: 'Tag'
        },
        {
            type: 'start_date',
            text: 'start_date:',
            'description': 'Show results newer than this date (press TAB for dropdown)',
            example: 'start_date:2014-08-15T13:00',
            tag: 'Start Date'
        },
        {
            type: 'end_date',
            text: 'end_date:',
            'description': 'Show results older than this date (press TAB for dropdown)',
            example: 'start_date:2014-08-15T23:59',
            tag: 'End Date'
        },
        {type: 'level', value: 'debug', text: 'level:debug'},
        {type: 'level', value: 'info', text: 'level:info'},
        {type: 'level', value: 'warning', text: 'level:warning'},
        {type: 'level', value: 'critical', text: 'level:critical'}
    ];
    vm.filterTypeAhead = null;
    vm.showDatePicker = false;
    vm.manualOpen = false;
    vm.aheadFilter = typeAheadTagHelper.aheadFilter;
    vm.removeSearchTag = function (tag) {
        $location.search(tag.type, null);
        vm.refresh();
    };
    vm.addSearchTag = function (tag) {
        $location.search(tag.type, tag.value);
        vm.refresh();
    };

    vm.paginationChange = function(){
        $location.search('page', vm.page);
        vm.refresh();
    };


    _.each(vm.applications, function (item) {
        vm.filterTypeAheadOptions.push({
            type: 'resource',
            text: 'resource:' + item.resource_id + ':' + item.resource_name,
            example: 'resource:' + item.resource_id,
            'tag': item.resource_name,
            'description': 'Restrict resultset to this application'
        });
    });

    vm.typeAheadTag = function (event) {
        var text = vm.filterTypeAhead;
        if (_.isObject(vm.filterTypeAhead)) {
            text = vm.filterTypeAhead.text;
        };
        if (!vm.filterTypeAhead) {
            return
        }
        var parsed = text.split(':');
        var tag = {'type': null, 'value': null};
        // app tags have : twice
        if (parsed.length > 2 && parsed[0] == 'resource') {
            tag.type = 'resource';
            tag.value = parsed[1];
        }
        // normal tag:value
        else if (parsed.length > 1) {
            tag.type = parsed[0];
            tag.value = parsed.slice(1).join(':');
        }
        else {
            tag.type = 'message';
            tag.value = parsed.join(':');
        }

        // set datepicker hour based on type of field
        if ('start_date:' == text) {
            vm.showDatePicker = true;
            vm.filterTypeAhead = 'start_date:' + moment(vm.pickerDate).utc().format();
        }
        else if ('end_date:' == text) {
            vm.showDatePicker = true;
            vm.filterTypeAhead = 'end_date:' + moment(vm.pickerDate).utc().hour(23).minute(59).format();
        }

        if (event.keyCode != 13 || !tag.type || !tag.value) {
            return
        }
        vm.showDatePicker = false;
        // aka we selected one of main options
        vm.addSearchTag({type: tag.type, value: tag.value});
        // clear typeahead
        vm.filterTypeAhead = undefined;
    };


    vm.pickerDateChanged = function(){
        if (vm.filterTypeAhead.indexOf('start_date:') == '0') {
            vm.filterTypeAhead = 'start_date:' + moment(vm.pickerDate).utc().format();
        }
        else if (vm.filterTypeAhead.indexOf('end_date:') == '0') {
            vm.filterTypeAhead = 'end_date:' + moment(vm.pickerDate).utc().hour(23).minute(59).format();
        }
        vm.showDatePicker = false;
    };

    vm.fetchLogs = function (searchParams) {
        vm.isLoading.logs = true;
        logsNoIdResource.query(searchParams, function (data, getResponseHeaders) {
            vm.isLoading.logs = false;
            var headers = getResponseHeaders();
            vm.logsPage = data;
            vm.itemCount = headers['x-total-count'];
            vm.itemsPerPage = headers['x-items-per-page'];
        }, function () {
            vm.isLoading.logs = false;
        });
    };

    vm.fetchSeriesData = function (searchParams) {
        searchParams['section'] = 'logs_section';
        searchParams['view'] = 'fetch_series';
        vm.isLoading.series = true;
        sectionViewResource.query(searchParams, function (data) {
            console.log('show node here');
            vm.logEventsChartData = {
                json: data,
                xFormat: '%Y-%m-%dT%H:%M:%S',
                keys: {
                    x: 'x',
                    value: ["logs"]
                },
                names: {
                    logs: 'Log events'
                },
                type: 'bar'
            };
            vm.isLoading.series = false;
        }, function () {
            vm.isLoading.series = false;
        });
    };

    vm.filterId = function (log) {
        $location.search('request_id', log.request_id);
        vm.refresh();
    };

    vm.refresh = function(){
        vm.searchParams = parseSearchToTags($location.search());
        vm.page = Number(vm.searchParams.page) || 1;
        var params = parseTagsToSearch(vm.searchParams);
        vm.fetchLogs(params);
        vm.fetchSeriesData(params);
    };
    console.info('page load');
    vm.refresh();
}