@pb33f/cowboy-components 0.5.8 → 0.6.0

package/dist/components/kv-view/kv-view.css.js

@@ -5,6 +5,12 @@ export default css `
         --paddy: 5px;
     }
     
+    .tiny {
+        font-size: 0.8rem!important;
+        border-right: none!important;
+        border-bottom: none!important;
+    }
+    
     .kv-table > table {
         width: 100%;
         border-spacing: 0;

package/dist/components/kv-view/kv-view.d.ts

@@ -4,7 +4,10 @@ export declare class KVViewComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     keyLabel: string;
     valueLabel: string;
+    showHeader: boolean;
+    tiny: boolean;
     private _data;
+    renderStream: HTMLDivElement;
     constructor();
     set data(value: Map<string, any>);
     render(): TemplateResult<1>;

package/dist/components/kv-view/kv-view.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, state, property } from "lit/decorators.js";
+import { customElement, state, property, query } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 import { LitElement } from "lit";
 import { html } from "lit";
@@ -24,6 +24,8 @@ let KVViewComponent = class KVViewComponent extends LitElement {
         this._data = new Map();
         this.keyLabel = 'Key';
         this.valueLabel = 'Value';
+        this.showHeader = true;
+        this.tiny = false;
     }
     set data(value) {
         if (value && value.size > 0) {
@@ -35,11 +37,14 @@ let KVViewComponent = class KVViewComponent extends LitElement {
         if (this._data) {
             headerData = html `
                 ${map(this._data, (i) => {
+                if (!i[1] || i[1] == '') {
+                    return html ``;
+                }
                 if (typeof i[1] === 'object') {
                     return html `
                             <tr>
-                                <td><code>${i[0]}</code></td>
-                                <td>
+                                <td class="${this.tiny ? 'tiny' : null}"><code>${i[0]}</code></td>
+                                <td class="${this.tiny ? 'tiny' : null}">
                                     <pre style=""><code class="no-box" style="white-space: pre-wrap;  word-wrap: break-word;">${unsafeHTML(Prism.highlight(JSON.stringify(i[1], null, 2), Prism.languages['json'], 'json'))}</pre></code>
                                 </td>
                             </tr>`;
@@ -47,14 +52,14 @@ let KVViewComponent = class KVViewComponent extends LitElement {
                 if (typeof i[1] === 'number') {
                     return html `
                             <tr>
-                                <td><code>${i[0]}</code></td>
-                                <td>${i[1]}</td>
+                                <td class="${this.tiny ? 'tiny' : null}"><code>${i[0]}</code></td>
+                                <td class="${this.tiny ? 'tiny' : null}">${i[1]}</td>
                             </tr>`;
                 }
                 return html `
                         <tr>
-                            <td><code>${i[0]}</code></td>
-                            <td>${unsafeHTML(i[1].toString())}</td>
+                            <td class="${this.tiny ? 'tiny' : null}"><code>${i[0]}</code></td>
+                            <td class="${this.tiny ? 'tiny' : null}">${unsafeHTML(i[1].toString())}</td>
                         </tr>`;
             })}
             `;
@@ -77,9 +82,9 @@ let KVViewComponent = class KVViewComponent extends LitElement {
         }
         const table = html `
 
-            <div class="kv-table">
+            <div class="kv-table ${this.tiny ? 'tiny' : null}">
                 <table>
-                    ${header}
+                    ${this.showHeader ? header : null}
                     <tbody>
                     ${headerData}
                     </tbody>
@@ -97,9 +102,18 @@ __decorate([
 __decorate([
     property()
 ], KVViewComponent.prototype, "valueLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], KVViewComponent.prototype, "showHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], KVViewComponent.prototype, "tiny", void 0);
 __decorate([
     state()
 ], KVViewComponent.prototype, "_data", void 0);
+__decorate([
+    query('.render-stream')
+], KVViewComponent.prototype, "renderStream", void 0);
 KVViewComponent = __decorate([
     customElement('pb33f-kv-view')
 ], KVViewComponent);

package/dist/components/rodeo/rodeo.css.js

@@ -12,6 +12,7 @@ export default css `
     
     #outlet {
         padding: 10px;
+       
     }
 
 `;

package/dist/components/rodeo/rodeo.d.ts

@@ -2,9 +2,29 @@ import { LitElement } from "lit";
 import './rodeo-nav.js';
 import './roundup.ts';
 import './users.ts';
+import { BusCallback, CommandResponse } from "@pb33f/ranch";
+import { PlatformEvent } from "../../model/platform-events";
 export declare class Rodeo extends LitElement {
     static styles: import("lit").CSSResult[];
+    private readonly bus;
+    private readonly doctorServiceChannel;
+    private readonly rodeoServiceChannel;
+    private rodeoChannelSubscription;
+    private doctorChannelSubscription;
+    private brokerConnectionId;
+    private readonly busPort;
+    private readonly busHost;
+    private readonly busVersion;
+    private readonly useTLS;
+    private readonly endpoint;
+    private authController;
+    private roundupComponent;
     constructor();
+    protected connectToBroker(): void;
+    whoAmI(): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    handlePlatformEvent(evt: PlatformEvent): void;
+    rodeoServiceStream(): BusCallback<CommandResponse>;
+    doctorServiceHandler(): BusCallback<CommandResponse>;
 }

package/dist/components/rodeo/rodeo.js

@@ -12,27 +12,147 @@ import { Router } from '@vaadin/router';
 import './rodeo-nav.js';
 import './roundup.ts';
 import './users.ts';
+import { CreateBus } from "@pb33f/ranch";
+import { Command, DoctorServiceChannel, isBrokerResponse, QueuePrefix, TopicPrefix, RodeoServiceChannel, isPlatformEvent } from "../../model/channels";
+import { LintingService } from "../../services/linting-service";
+import { AuthController } from "../../controllers/auth";
+import { RodeoService } from "../../services/rodeo-service";
+import { RodeoRoundup } from "./roundup";
+import { PlatformEventType } from "../../model/platform-events";
 let Rodeo = class Rodeo extends LitElement {
     constructor() {
         super();
+        this.useTLS = false;
+        this.bus = CreateBus();
+        this.doctorServiceChannel = this.bus.createChannel(DoctorServiceChannel);
+        this.rodeoServiceChannel = this.bus.createChannel(RodeoServiceChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
+        this.doctorChannelSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
+        this.roundupComponent = new RodeoRoundup();
+        // extract port from session storage.
+        this.busPort = sessionStorage.getItem("pb33f-doctor-port");
+        this.busHost = sessionStorage.getItem("pb33f-doctor-host");
+        this.endpoint = sessionStorage.getItem("doctor-endpoint");
+        LintingService.doctorEndpoint = this.endpoint;
+        RodeoService.doctorEndpoint = this.endpoint;
+        if (!this.busPort) {
+            this.busPort = "443"; // default port
+        }
+        if (!this.busHost) {
+            this.busHost = "doctor.pb33f.io"; // default host
+        }
+        const useTLS = sessionStorage.getItem("pb33f-doctor-tls");
+        if (useTLS && useTLS == 'true') {
+            this.useTLS = true;
+        }
+        this.authController = new AuthController(this, this.connectToBroker, true);
+    }
+    connectToBroker() {
+        let protocol = "ws://";
+        if (this.useTLS) {
+            protocol = "wss://";
+        }
+        // configure wiretap broker.
+        const config = {
+            brokerURL: protocol + this.busHost + ':' + this.busPort + '/ranch',
+            heartbeatIncoming: 0,
+            heartbeatOutgoing: 0,
+            mapChannelsOnConnect: true,
+            onConnect: () => {
+                this.whoAmI();
+            }
+        };
+        this.bus.connectToBroker(config);
+    }
+    whoAmI() {
+        this.bus.publish({
+            destination: "/p/q/" + DoctorServiceChannel,
+            body: JSON.stringify({ request: Command.WhoAmI }),
+        });
     }
     firstUpdated() {
         const router = new Router(this.shadowRoot?.getElementById('outlet'));
-        console.log('router', router);
         router?.setRoutes([
-            { path: '/rodeo.html', component: 'pb33f-rodeo-home' },
-            { path: '/', component: 'pb33f-rodeo-home' },
+            {
+                path: '/rodeo.html', action: () => {
+                    return this.roundupComponent;
+                }
+            },
+            {
+                path: '/', action: () => {
+                    return this.roundupComponent;
+                }
+            },
             { path: '/users', component: 'pb33f-rodeo-users' }
         ]);
+        this.connectToBroker();
     }
     render() {
         return html `
             <main>
                 <pb33f-rodeo-nav></pb33f-rodeo-nav>
-                <div id="outlet"></div>
+                <div style="position: relative"><div id="outlet"></div></div>
             </main>
         `;
     }
+    handlePlatformEvent(evt) {
+        this.roundupComponent.pushConsoleEventInfoMessage(evt);
+        switch (evt.event) {
+            case PlatformEventType.AssociateBroker:
+                this.roundupComponent.numBrokerAssociations++;
+                break;
+            case PlatformEventType.UserAuthenticated:
+                this.roundupComponent.numAuthenticatedSessions++;
+                break;
+            case PlatformEventType.SessionStarted:
+                this.roundupComponent.numSessionsActive++;
+                break;
+            case PlatformEventType.UserCreated:
+                this.roundupComponent.numUsers++;
+                break;
+        }
+    }
+    rodeoServiceStream() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                if (isPlatformEvent(msg.payload.payload)) {
+                    // if there is no id, then the event is a socket event.
+                    if ('id' in msg.payload.payload) {
+                        this.handlePlatformEvent(msg.payload.payload);
+                    }
+                    else {
+                        const se = msg.payload.payload;
+                        if (se.type) {
+                            switch (se.type) {
+                                case "open":
+                                    this.roundupComponent.numActiveSockets++;
+                                    this.roundupComponent.numSocketsOpened++;
+                                    break;
+                                case "close":
+                                    this.roundupComponent.numActiveSockets--;
+                                    this.roundupComponent.numSocketsClosed--;
+                                    break;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    }
+    doctorServiceHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                if (isBrokerResponse(msg.payload.payload)) {
+                    this.brokerConnectionId = msg.payload.payload.broker;
+                    this.authController.associateBroker(this.brokerConnectionId).then(() => {
+                        console.log("🤠 welcome to the %crodeo %ccowboy.", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                        this.bus.mapChannelToBrokerDestination(TopicPrefix + RodeoServiceChannel, RodeoServiceChannel);
+                        this.rodeoChannelSubscription = this.rodeoServiceChannel.subscribe(this.rodeoServiceStream());
+                    });
+                }
+            }
+        };
+    }
 };
 Rodeo.styles = [rodeoCss, listsCss];
 Rodeo = __decorate([

package/dist/components/rodeo/roundup.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/rodeo/roundup.css.js

@@ -0,0 +1,16 @@
+import { css } from "lit";
+export default css `
+    .roundup {
+
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .emulator {
+        width: calc(100vw - 255px);
+        height: 290px;
+        position: absolute;
+        bottom: 2px;
+        left: 0;
+    }
+`;

package/dist/components/rodeo/roundup.d.ts

@@ -1,4 +1,20 @@
 import { LitElement } from "lit";
-export declare class RodeoHome extends LitElement {
+import './statistic.js';
+import '../terminal-emulator/terminal-emulator.js';
+import { PlatformEvent } from "../../model/platform-events";
+export declare class RodeoRoundup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    numSocketsOpened: number;
+    numSocketsClosed: number;
+    numActiveSockets: number;
+    numSessionsCreated: number;
+    numSessionsActive: number;
+    numAuthenticatedSessions: number;
+    numUsers: number;
+    numBrokerAssociations: number;
+    private terminalEmulator;
+    constructor();
+    firstUpdated(): void;
+    pushConsoleEventInfoMessage(evt: PlatformEvent): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/rodeo/roundup.js

@@ -5,14 +5,92 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-let RodeoHome = class RodeoHome extends LitElement {
+import { customElement, property } from "lit/decorators.js";
+import { RodeoService } from "../../services/rodeo-service.js";
+import './statistic.js';
+import '../terminal-emulator/terminal-emulator.js';
+import roundupCss from "./roundup.css.js";
+import { TerminalEmulator } from "../terminal-emulator/terminal-emulator";
+let RodeoRoundup = class RodeoRoundup extends LitElement {
+    constructor() {
+        super();
+        this.terminalEmulator = new TerminalEmulator();
+        this.terminalEmulator.label = 'event stream';
+    }
+    firstUpdated() {
+        // fetch the roundup from the rodeo service.
+        RodeoService.getRoundup().then((stats) => {
+            this.numActiveSockets = stats.activeSockets;
+            this.numSocketsClosed = stats.socketsClosed;
+            this.numSocketsOpened = stats.socketsOpened;
+            this.numSessionsActive = stats.sessionsOpen;
+            this.numSessionsCreated = stats.sessionCreated;
+            this.numAuthenticatedSessions = stats.sessionsAuthenticated;
+            this.numUsers = stats.users;
+            this.numBrokerAssociations = stats.brokerAssociations;
+        });
+    }
+    pushConsoleEventInfoMessage(evt) {
+        const terminalMessage = {
+            type: 'info',
+            message: `event: ${evt.event}`,
+            metadata: evt.metadata,
+            timestamp: new Date().toString()
+        };
+        this.terminalEmulator.addMessage(terminalMessage);
+        this.terminalEmulator.requestUpdate();
+    }
     render() {
         return html `
+            <div class="roundup">
+                <pb33f-rodeo-statistic title="Sockets Opened" value="${this.numSocketsOpened}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Sockets Closed" value="${this.numSocketsClosed}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Active Sockets" value="${this.numActiveSockets}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Active Sessions"
+                                       value="${this.numSessionsActive}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Sessions Created"
+                                       value="${this.numSessionsCreated}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Authenticated Sessions"
+                                       value="${this.numAuthenticatedSessions}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Broker Associations"
+                                       value="${this.numBrokerAssociations}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Users"
+                                       value="${this.numUsers}"></pb33f-rodeo-statistic>
+                
+            </div>
+            <div class="emulator">
+                ${this.terminalEmulator}
+            </div>
+
         `;
     }
 };
-RodeoHome = __decorate([
+RodeoRoundup.styles = [roundupCss];
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numSocketsOpened", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numSocketsClosed", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numActiveSockets", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numSessionsCreated", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numSessionsActive", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numAuthenticatedSessions", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numUsers", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numBrokerAssociations", void 0);
+RodeoRoundup = __decorate([
     customElement('pb33f-rodeo-home')
-], RodeoHome);
-export { RodeoHome };
+], RodeoRoundup);
+export { RodeoRoundup };

package/dist/components/rodeo/statistic.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/rodeo/statistic.css.js

@@ -0,0 +1,69 @@
+import { css } from "lit";
+export default css `
+    :host{
+        color: var(--font-color)
+    }
+    
+    .statistic {
+        width: 270px;
+        height: 80px;
+        border: 1px solid var(--secondary-color);
+        padding: 10px;
+        margin: 10px;
+    }
+    .title {
+        height: 30px;
+        font-size: 1.2rem;
+        font-family: var(--font-stack-bold), serif;
+        color: var(--secondary-color)
+    }
+    
+    .details {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    .value {
+        display: inline-block;
+        font-size: 2.5rem;
+        color: var(--primary-color);
+        text-shadow: 0 0 20px var(--primary-color-lowalpha);
+    }
+
+    @keyframes pulse {
+        0% {
+            text-shadow: 0 0 10px var(--primary-color);
+            transform: scale(1);
+        }
+        50% {
+            text-shadow: 0 0 30px var(--font-color);
+            transform: scale(1.1);
+        }
+        100% {
+            text-shadow: 0 0 10px var(--primary-color);
+            transform: scale(1);
+        }
+    }
+    /* The class that triggers the animation */
+    .pulse {
+        animation: pulse 200ms ease-out;
+    }
+
+    /* New keyframes for the border flash */
+    @keyframes borderFlash {
+        0% {
+            border-color: var(--secondary-color);
+        }
+        50% {
+            border-color: var(--primary-color); /* You can define --flash-color in your CSS variables */
+        }
+        100% {
+            border-color: var(--secondary-color);
+        }
+    }
+    /* The class that triggers the border flash */
+    .border-flash {
+        animation: borderFlash 400ms ease-out;
+    }
+    
+`;

package/dist/components/rodeo/statistic.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+import '@shoelace-style/shoelace/dist/components/format-number/format-number.js';
+export declare class Statistic extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    value: number;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: Map<string, unknown>): void;
+}

package/dist/components/rodeo/statistic.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import statisticCss from "./statistic.css";
+import '@shoelace-style/shoelace/dist/components/format-number/format-number.js';
+let Statistic = class Statistic extends LitElement {
+    constructor() {
+        super();
+        this.title = 'statistic';
+    }
+    render() {
+        return html `
+            <div class="statistic">
+                <div class="title">
+                    ${this.title}
+                </div>
+                <div class="details">
+                <span class="value">
+                    <sl-format-number value="${this.value}"></sl-format-number></span>
+                </div>
+            </div>`;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            // Animate the value text
+            const valueElement = this.shadowRoot?.querySelector('.value');
+            if (valueElement) {
+                valueElement.classList.remove('pulse');
+                //@ts-ignore
+                void valueElement.offsetWidth;
+                valueElement.classList.add('pulse');
+            }
+            // Animate the container border
+            const statisticElement = this.shadowRoot?.querySelector('.statistic');
+            if (statisticElement) {
+                statisticElement.classList.remove('border-flash');
+                //@ts-ignore
+                void statisticElement.offsetWidth;
+                statisticElement.classList.add('border-flash');
+            }
+        }
+    }
+};
+Statistic.styles = [statisticCss];
+__decorate([
+    property()
+], Statistic.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], Statistic.prototype, "value", void 0);
+Statistic = __decorate([
+    customElement('pb33f-rodeo-statistic')
+], Statistic);
+export { Statistic };

package/dist/components/terminal-emulator/terminal-emulator.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;