dev-ui.qwc-zeebe-dashboard.js Maven / Gradle / Ivy

Go to download
import { LitElement, html, css} from 'lit';
import { JsonRpc } from 'jsonrpc';
import {choose} from 'lit/directives/choose.js';
import '@vaadin/tabs';
import './zeebe/zeebe-processes.js';
import './zeebe/zeebe-process.js';
import './zeebe/zeebe-instances.js';
import './zeebe/zeebe-instance.js';
import './zeebe/zeebe-jobs.js';
import './zeebe/zeebe-incidents.js';
import './zeebe/zeebe-errors.js';
import './zeebe/zeebe-messages.js';
import './zeebe/zeebe-signals.js';
import './zeebe/zeebe-user-tasks.js';

export class ZeebeDashboard extends LitElement {

    jsonRpc = new JsonRpc(this);

    static properties = {
        _context: { state: true},
        _nav: { state: true},
        _tab: { state: true},
        _tabs: {},
    };

    constructor() {
        super();
        this._tabs = new Map([
            ["processes", 0], ["process", 0],
            ["instances", 1], ["instance", 1], ["instance-child", 1],
            ["incidents", 2], ["jobs", 3], ["messages", 4], ["signals", 5], ["errors", 6], ["user-tasks", 7]
        ]);
        this._navbar("processes");
    }

    render() {
        return html`
            
                 this._navbar("processes")}>Processes
                 this._navbar("instances")}>Instances
                 this._navbar("incidents")}>Incidents
                 this._navbar("jobs")}>Jobs
                 this._navbar("messages")}>Messages
                 this._navbar("signals")}>Signals
                 this._navbar("errors")}>Errors
                 this._navbar("user-tasks")}>User tasks
            
            
            ${choose(this._nav, [
                ['processes', () => html` this.navigation(request)}>`], 
                ['process', () => html` this.navigation(request)}>`],
                ['instances', () => html` this.navigation(request)}>`], 
                ['instance', () => html` this.navigation(request)}>`],
                ['instance-child', () => html` this.navigation(request)}>`],                    
                ['jobs', () => html` this.navigation(request)}>`],
                ['incidents', () => html` this.navigation(request)}>`],
                ['errors', () => html` this.navigation(request)}>`],
                ['messages', () => html` this.navigation(request)}>`],
                ['signals', () => html` this.navigation(request)}>`],
                ['user-tasks', () => html` this.navigation(request)}>`],    
            ],
            () => html`Not defined ${this._nav}`)}
        `;
    }

    _navbar(nav) {
        this.navigation({nav: nav, id: null});
    }

    navigation(request) {
        this._context = { nav: request.nav, id: request.id, extension: this.jsonRpc.getExtensionName() };
        this._tab = this._tabs.get(request.nav);
        let c = this._nav === request.nav;
        if (c) {
            if (request.nav === 'instance') {
                request.nav = 'instance-child';
            } else if (request.nav === 'instance-child') {
                request.nav = 'instance';
            }
        }
        this._nav = request.nav;
    }
}

customElements.define('qwc-zeebe-dashboard', ZeebeDashboard);