awx/awx/ui/client/features/output/render.service.js

import Ansi from 'ansi-to-html';
import Entities from 'html-entities';

import {
    EVENT_START_PLAY,
    EVENT_STATS_PLAY,
    EVENT_START_TASK,
    OUTPUT_ANSI_COLORMAP,
    OUTPUT_ELEMENT_TBODY,
    OUTPUT_EVENT_LIMIT,
} from './constants';

const EVENT_GROUPS = [
    EVENT_START_TASK,
    EVENT_START_PLAY,
];

const TIME_EVENTS = [
    EVENT_START_TASK,
    EVENT_START_PLAY,
    EVENT_STATS_PLAY,
];

const ansi = new Ansi({ stream: true, colors: OUTPUT_ANSI_COLORMAP });
const entities = new Entities.AllHtmlEntities();

// https://github.com/chalk/ansi-regex
const pattern = [
    '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
    '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'
].join('|');

const re = new RegExp(pattern);
const hasAnsi = input => re.test(input);

let $scope;

function JobRenderService ($q, $compile, $sce, $window, strings) {
    this.init = (_$scope_, { toggles }) => {
        $scope = _$scope_;
        this.setScope();

        this.el = $(OUTPUT_ELEMENT_TBODY);
        this.parent = null;

        this.state = {
            head: 0,
            tail: 0,
            collapseAll: false,
            toggleMode: toggles,
        };

        this.records = {};
        this.uuids = {};
    };

    this.setCollapseAll = value => {
        this.state.collapseAll = value;
        Object.keys(this.records).forEach(key => {
            this.records[key].isCollapsed = value;
        });
    };

    this.sortByCounter = (a, b) => {
        if (a.counter > b.counter) {
            return 1;
        }

        if (a.counter < b.counter) {
            return -1;
        }

        return 0;
    };

    //
    // Event Data Transformation / HTML Building
    //

    this.appendEventGroup = events => {
        let lines = 0;
        let html = '';

        events.sort(this.sortByCounter);

        for (let i = 0; i <= events.length - 1; i++) {
            const current = events[i];

            if (this.state.tail && current.counter !== this.state.tail + 1) {
                const missing = this.appendMissingEventGroup(current);

                html += missing.html;
                lines += missing.count;
            }

            const eventLines = this.transformEvent(current);

            html += eventLines.html;
            lines += eventLines.count;
        }

        return { html, lines };
    };

    this.appendMissingEventGroup = event => {
        const tailUUID = this.uuids[this.state.tail];
        const tailRecord = this.records[tailUUID];

        if (!tailRecord) {
            return { html: '', count: 0 };
        }

        let uuid;

        if (tailRecord.isMissing) {
            uuid = tailUUID;
        } else {
            uuid = `${event.counter}-${tailUUID}`;
            this.records[uuid] = { uuid, counters: [], lineCount: 1, isMissing: true };
        }

        for (let i = this.state.tail + 1; i < event.counter; i++) {
            this.records[uuid].counters.push(i);
            this.uuids[i] = uuid;
        }

        if (tailRecord.isMissing) {
            return { html: '', count: 0 };
        }

        if (tailRecord.end === event.start_line) {
            return { html: '', count: 0 };
        }

        const html = this.buildRowHTML(this.records[uuid], null, null, event);
        const count = 1;

        return { html, count };
    };

    this.prependEventGroup = events => {
        let lines = 0;
        let html = '';

        events.sort(this.sortByCounter);

        for (let i = events.length - 1; i >= 0; i--) {
            const current = events[i];

            if (this.state.head && current.counter !== this.state.head - 1) {
                const missing = this.prependMissingEventGroup(current);

                html = missing.html + html;
                lines += missing.count;
            }

            const eventLines = this.transformEvent(current);

            html = eventLines.html + html;
            lines += eventLines.count;
        }

        return { html, lines };
    };

    this.prependMissingEventGroup = event => {
        const headUUID = this.uuids[this.state.head];
        const headRecord = this.records[headUUID];

        if (!headRecord) {
            return { html: '', count: 0 };
        }

        let uuid;

        if (headRecord.isMissing) {
            uuid = headUUID;
        } else {
            uuid = `${headUUID}-${event.counter}`;
            this.records[uuid] = { uuid, counters: [], lineCount: 1, isMissing: true };
        }

        for (let i = this.state.head - 1; i > event.counter; i--) {
            this.records[uuid].counters.unshift(i);
            this.uuids[i] = uuid;
        }

        if (headRecord.isMissing) {
            return { html: '', count: 0 };
        }

        if (event.end_line === headRecord.start) {
            return { html: '', count: 0 };
        }

        const html = this.buildRowHTML(this.records[uuid], null, null, event);
        const count = 1;

        return { html, count };
    };

    this.transformEvent = event => {
        if (!event || event.stdout === null || event.stdout === undefined) {
            return { html: '', count: 0 };
        }

        if (event.uuid && this.records[event.uuid] && !this.records[event.uuid]._isIncomplete) {
            return { html: '', count: 0 };
        }

        const stdout = this.sanitize(event.stdout);
        const lines = stdout.split('\r\n');
        const record = this.createRecord(event, lines);

        if (lines.length === 1 && lines[0] === '') {
            return { html: '', count: 0 };
        }

        let html = '';
        let count = lines.length;
        let ln = event.start_line;

        for (let i = 0; i <= lines.length - 1; i++) {
            ln++;

            const line = lines[i];
            const isLastLine = i === lines.length - 1;

            let row = this.buildRowHTML(record, ln, line, event);

            if (record && record.isTruncated && isLastLine) {
                row += this.buildRowHTML(record, null, null, event);
                count++;
            }

            html += row;
        }

        if (this.records[event.uuid]) {
            this.records[event.uuid].lineCount = count;
        }

        return { html, count };
    };

    this.createRecord = (event, lines) => {
        if (!event.counter) {
            return null;
        }

        if (!this.state.head || event.counter < this.state.head) {
            this.state.head = event.counter;
        }

        if (!this.state.tail || event.counter > this.state.tail) {
            this.state.tail = event.counter;
        }

        if (!event.uuid) {
            this.uuids[event.counter] = event.counter;
            this.records[event.counter] = { counters: [event.counter], lineCount: lines.length };

            return this.records[event.counter];
        }

        let isClickable = false;
        if (typeof event.host === 'number' || event.event_data && event.event_data.res) {
            isClickable = true;
        } else if (event.type === 'project_update_event' &&
            event.event !== 'runner_on_skipped' &&
            event.event_data.host) {
            isClickable = true;
        }

        const children = (this.records[event.uuid] && this.records[event.uuid].children)
            ? this.records[event.uuid].children : [];

        const record = {
            isClickable,
            id: event.id,
            line: event.start_line + 1,
            name: event.event,
            uuid: event.uuid,
            level: event.event_level,
            start: event.start_line,
            end: event.end_line,
            isTruncated: (event.end_line - event.start_line) > lines.length,
            lineCount: lines.length,
            isCollapsed: this.state.collapseAll,
            counters: [event.counter],
            children
        };

        if (event.parent_uuid) {
            record.parents = this.getParentEvents(event.parent_uuid);
            if (this.records[event.parent_uuid]) {
                record.isCollapsed = this.records[event.parent_uuid].isCollapsed;
            }
        }

        if (record.isTruncated) {
            record.truncatedAt = event.start_line + lines.length;
        }

        if (EVENT_GROUPS.includes(event.event)) {
            record.isParent = true;

            if (event.event_level === 1) {
                this.parent = event.uuid;
            }

            if (event.parent_uuid) {
                if (this.records[event.parent_uuid]) {
                    if (this.records[event.parent_uuid].children) {
                        if (!this.records[event.parent_uuid].children.includes(event.uuid)) {
                            this.records[event.parent_uuid].children.push(event.uuid);
                        }
                    } else {
                        this.records[event.parent_uuid].children = [event.uuid];
                    }
                } else {
                    this.records[event.parent_uuid] = {
                        _isIncomplete: true,
                        children: [event.uuid]
                    };
                }
            }
        }

        if (TIME_EVENTS.includes(event.event)) {
            record.time = this.getTimestamp(event.created);
            record.line++;
        }

        this.records[event.uuid] = record;
        this.uuids[event.counter] = event.uuid;

        return record;
    };

    this.getParentEvents = (uuid, list) => {
        list = list || [];
        // always push its parent if exists
        list.push(uuid);
        // if we can get grandparent in current visible lines, we also push it
        if (this.records[uuid] && this.records[uuid].parents) {
            list = list.concat(this.records[uuid].parents);
        }

        return list;
    };

    this.buildRowHTML = (record, ln, content, event) => {
        let id = '';
        let icon = '';
        let timestamp = '';
        let tdToggle = '';
        let tdEvent = '';
        let classList = '';
        let directives = `aw-tool-tip="${this.createToolTip(event, record)}" aw-tip-placement="top"`;

        if (record.isMissing) {
            return `<div id="${record.uuid}" class="at-Stdout-row">
                <div class="at-Stdout-toggle"></div>
                <div class="at-Stdout-line at-Stdout-line--clickable" ng-click="vm.showMissingEvents('${record.uuid}')">...</div></div>`;
        }

        content = content || '';

        if (hasAnsi(content)) {
            content = ansi.toHtml(content);
        }

        if (record) {
            if (this.state.toggleMode && record.isParent && record.line === ln) {
                id = record.uuid;

                if (record.isCollapsed) {
                    icon = 'fa-angle-right';
                } else {
                    icon = 'fa-angle-down';
                }

                tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleCollapse('${id}')"><i class="fa ${icon} can-toggle"></i></div>`;
            }

            if (record.time && record.line === ln) {
                timestamp = `<span>${record.time}</span>`;
            }

            if (record.parents) {
                classList = record.parents.reduce((list, uuid) => `${list} child-of-${uuid}`, '');
            }
        }

        if (!tdEvent) {
            tdEvent = `<div class="at-Stdout-event"><span ng-non-bindable>${content}</span></div>`;
        }

        if (!tdToggle) {
            tdToggle = '<div class="at-Stdout-toggle"></div>';
        }

        if (!ln) {
            ln = '...';
        }

        if (record && record.isCollapsed) {
            if (record.level === 3 || record.level === 0) {
                classList += ' at-Stdout-row--hidden';
            }
        }

        if (record && record.isClickable) {
            classList += ' at-Stdout-row--clickable';
            directives += ` ng-click="vm.showHostDetails('${record.id}', '${record.uuid}')"
            `;
        }
        return `
            <div id="${id}" class="at-Stdout-row ${classList}" ${directives}>
                ${tdToggle}
                <div class="at-Stdout-line">${ln}</div>
                <div class="at-Stdout-event"><span ng-non-bindable>${content}</span></div>
                <div class="at-Stdout-time">${timestamp}</div>
            </div>
        `;
    };

    this.createToolTip = (event, record) => {
        const status = strings.get('tooltips.HOST_STATUS');
        const eventID = strings.get('tooltips.EVENT_ID');
        const clickForDetails = strings.get('tooltips.DETAILS');

        return record.isClickable
            ? `${status} ${event.event_display}<br />${eventID} ${event.id}<br />${clickForDetails}`
            : `${status} ${event.event_display}<br />${eventID} ${event.id}`;
    };

    this.getTimestamp = created => {
        const date = new Date(created);
        const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
        const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
        const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

        return `${hour}:${minute}:${second}`;
    };

    //
    // Element Operations
    //

    this.remove = elements => this.requestAnimationFrame(() => elements.remove());

    this.requestAnimationFrame = fn => $q(resolve => {
        $window.requestAnimationFrame(() => {
            if (fn) {
                fn();
            }

            return resolve();
        });
    });

    this.setScope = () => {
        if (this.scope) this.scope.$destroy();
        delete this.scope;

        this.scope = $scope.$new();
    };

    this.compile = () => {
        this.setScope();
        $compile(this.el)(this.scope);

        return this.requestAnimationFrame();
    };

    this.removeAll = () => {
        const elements = this.el.contents();
        return this.remove(elements);
    };

    this.shift = lines => {
        // We multiply by two here under the assumption that one element and one text node
        // is generated for each line of output.
        const count = 2 * lines;
        const elements = this.el.contents().slice(0, count);

        return this.remove(elements);
    };

    this.pop = lines => {
        // We multiply by two here under the assumption that one element and one text node
        // is generated for each line of output.
        const count = 2 * lines;
        const elements = this.el.contents().slice(-count);

        return this.remove(elements);
    };

    this.prepend = events => {
        if (events.length < 1) {
            return $q.resolve();
        }

        const result = this.prependEventGroup(events);
        const html = this.trustHtml(result.html);

        return this.requestAnimationFrame(() => this.el.prepend(html))
            .then(() => result.lines);
    };

    this.append = events => {
        if (events.length < 1) {
            return $q.resolve();
        }

        const result = this.appendEventGroup(events);
        const html = this.trustHtml(result.html);

        return this.requestAnimationFrame(() => this.el.append(html))
            .then(() => result.lines);
    };

    this.trustHtml = html => $sce.getTrustedHtml($sce.trustAsHtml(html));
    this.sanitize = html => entities.encode(html);

    //
    // Event Counter Methods - External code should prefer these.
    //

    this.clear = () => this.removeAll()
        .then(() => {
            const head = this.getHeadCounter();
            const tail = this.getTailCounter();

            for (let i = head; i <= tail; ++i) {
                const uuid = this.uuids[i];

                if (uuid) {
                    delete this.records[uuid];
                    delete this.uuids[i];
                }
            }

            this.state.head = 0;
            this.state.tail = 0;

            return $q.resolve();
        });

    this.pushFront = events => {
        const tail = this.getTailCounter();

        return this.append(events.filter(({ counter }) => counter > tail));
    };

    this.pushBack = events => {
        const head = this.getHeadCounter();
        const tail = this.getTailCounter();

        return this.prepend(events.filter(({ counter }) => counter < head || counter > tail));
    };

    this.popFront = count => {
        if (!count || count <= 0) {
            return $q.resolve();
        }

        const max = this.state.tail;
        const min = max - count;

        let lines = 0;

        for (let i = max; i >= min; --i) {
            const uuid = this.uuids[i];

            if (!uuid) {
                continue;
            }

            this.records[uuid].counters.pop();
            delete this.uuids[i];

            if (this.records[uuid].counters.length === 0) {
                lines += this.records[uuid].lineCount;

                delete this.records[uuid];
                this.state.tail--;
            }
        }

        return this.pop(lines);
    };

    this.popBack = count => {
        if (!count || count <= 0) {
            return $q.resolve();
        }

        const min = this.state.head;
        const max = min + count;

        let lines = 0;

        for (let i = min; i <= max; ++i) {
            const uuid = this.uuids[i];

            if (!uuid) {
                continue;
            }

            this.records[uuid].counters.shift();
            delete this.uuids[i];

            if (this.records[uuid].counters.length === 0) {
                lines += this.records[uuid].lineCount;

                delete this.records[uuid];
                this.state.head++;
            }
        }

        return this.shift(lines);
    };

    this.getHeadCounter = () => this.state.head;
    this.getTailCounter = () => this.state.tail;
    this.getCapacity = () => OUTPUT_EVENT_LIMIT - (this.getTailCounter() - this.getHeadCounter());
}

JobRenderService.$inject = ['$q', '$compile', '$sce', '$window', 'OutputStrings'];

export default JobRenderService;