@pb33f/cowboy-components 0.3.2 → 0.3.4

package/dist/components/the-doctor/the-doctor.js

@@ -44,6 +44,11 @@ import { ModelTree } from "../model-tree/tree.js";
 import { ExplorerComponent } from "../visualizer/explorer.js";
 import { RenderedNodeComponent } from "../model-renderer/rendered-node.js";
 import tabsCss from "../../css/tabs.css.js";
+import { CreateBus } from "@pb33f/ranch";
+import { Command, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../../model/channels";
+import formsCss from "../../css/forms.css";
+import { PixelSparks } from "./sparks.js";
+import spinnerCss from "../../css/spinner.css";
 export const GraphBag = "pb33f-doctor-graph";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
@@ -67,6 +72,15 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.debounceTime = 400;
         this.debounceTimeRuleset = 900;
         this.bounceId = 0;
+        this.useTLS = false;
+        // bus it up
+        this.bus = CreateBus();
+        this.doctorServiceChannel = this.bus.createChannel(DoctorServiceChannel);
+        this.specStreamChannel = this.bus.createChannel(SpecStreamChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
+        this.doctorChannelSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
+        this.specChannelSubscription = this.specStreamChannel.subscribe(this.specStreamHandler());
         // create a stateful bag manager
         this.bagManager = CreateBagManager(true);
         this.bagManager.loadStatefulBags().then(this.loadState.bind(this));
@@ -140,21 +154,84 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.explorer.equalizer.addEventListener(ExplorerEqualizerChanged, this.filterTreeModel.bind(this));
         //@ts-ignore
         this.explorer.equalizer.addEventListener(ExplorerEqualizerFiltered, this.filterTreeModel.bind(this));
+        // extract port from session storage.
+        this.busPort = localStorage.getItem("pb33f-doctor-port");
+        this.busHost = localStorage.getItem("pb33f-doctor-host");
+        if (!this.busPort) {
+            this.busPort = "9090"; // default port
+        }
+        if (!this.busHost) {
+            this.busHost = "localhost"; // default host
+        }
+        const useTLS = localStorage.getItem("pb33f-doctor-tls");
+        if (useTLS && useTLS == 'true') {
+            this.useTLS = true;
+        }
         // hijack navigation buttons.
         window.addEventListener('popstate', (e) => {
             const state = e.state;
             if (state) {
-                switch (state.view) {
-                    case ActiveView.Problems:
-                        this.controlTabGroup.show(ActiveView.Problems);
-                        break;
-                    case ActiveView.Overview:
-                        this.controlTabGroup.show(ActiveView.Overview);
-                        break;
+                if (state.activeNode) {
+                    this.modelTreeNodeClicked(new CustomEvent(ExplorerNodeClicked, {
+                        detail: {
+                            nodeHashId: state.activeNode,
+                            noState: true
+                        }
+                    }));
                 }
             }
         });
-        //history.pushState({view: ActiveView.Overview}, "", ActiveView.Overview);
+    }
+    whoAmI() {
+        this.bus.publish({
+            destination: "/p/q/" + DoctorServiceChannel,
+            body: JSON.stringify({ request: Command.WhoAmI }),
+        });
+    }
+    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,
+            onConnect: () => {
+                console.log("💊 Connected to the %cOpenAPI Doctor%c, we are ready to communicate.", 'background: #0d1117; color: #62C4FFFF; font-weight: bold', 'color: default');
+                this.whoAmI();
+            }
+        };
+        this.bus.connectToBroker(config);
+    }
+    addClickTrack(node) {
+        history.pushState({ activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
+    }
+    doctorServiceHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                if (isBrokerResponse(msg.payload.payload)) {
+                    this.brokerConnectionId = msg.payload.payload.broker;
+                    console.log("💊 Welcome patient %c" + this.brokerConnectionId, 'color: #62C4FFFF; font-weight: bold');
+                    this.boostrap();
+                    this.loadingOverlay.hide();
+                }
+            }
+        };
+    }
+    specStreamHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                // base64 decode the payload and update the editor!
+                const decoded = atob(msg.payload.payload);
+                if (this.docBag) {
+                    this.docBag.set(DefaultDocument, decoded);
+                }
+                this.editor?.setValue(decoded, true);
+                this.requestUpdate();
+            }
+        };
     }
     filterTreeModel(event) {
         this.filteredNodes = new Map();
@@ -206,6 +283,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             if (renderedNode) {
                 this.renderedNode.node = renderedNode;
             }
+            if (!evt.detail.noState) {
+                this.addClickTrack(node);
+                evt.detail.noState = true;
+            }
             this.explorerNodeClicked(evt);
             this.viewerPanel.click();
         }
@@ -223,6 +304,9 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.activeNode = node.body.node;
                 this.explorer.activeNode = node.body.node;
                 found = true;
+                if (!evt.detail.noState) {
+                    this.addClickTrack(node.body.node);
+                }
             }
             else {
                 node.body.active = false;
@@ -353,9 +437,19 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }
     }
-    lintSpec(value) {
+    lintSpec(value, url) {
         this.activitySpinner.show();
-        LintingService.lintFile(value).then((result) => {
+        if (url) {
+            this.urlProblem.style.display = 'none';
+            this.urlOverlay.style.display = "block";
+            this.urlSpinner.style.display = "block";
+        }
+        LintingService.lintFile(value, this.brokerConnectionId, url).then((result) => {
+            if (url) {
+                this.urlOverlay.style.display = "none";
+                this.urlSpinner.style.display = "none";
+                this.urlProblem.style.display = 'none';
+            }
             if (result && !Array.isArray(result)) {
                 this.editor.setMarkers([result]);
                 this.problemBag?.set(DocumentProblems, [result]);
@@ -415,21 +509,26 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.platformUnavailable(e);
             });
         }).catch((e) => {
-            this.platformUnavailable(e);
-            console.error("so sorry, the doctor cannot see you right now, the clinic is closed.");
-            if (e) {
-                console.error(e.detail);
-                if (e.instance === 'https://pb33f.io/errors/no-credit-remaining') {
-                    this.statusBar.callsRemaining = 0;
-                    this.statusBar.visible = true;
-                    this.sendToast({
-                        id: crypto.randomUUID(),
-                        type: ToastType.ERROR,
-                        body: "Run out of credit, please authenticate for more or wait 24 hours.",
-                        title: "Credit exhausted!",
-                    });
+            if (!url) {
+                this.platformUnavailable(e);
+                console.error("so sorry, the doctor cannot see you right now, the clinic is closed.");
+                if (e) {
+                    console.error(e.detail);
+                    if (e.instance === 'https://pb33f.io/errors/no-credit-remaining') {
+                        this.statusBar.callsRemaining = 0;
+                        this.statusBar.visible = true;
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.ERROR,
+                            body: "Run out of credit, please authenticate for more or wait 24 hours.",
+                            title: "Credit exhausted!",
+                        });
+                    }
                 }
             }
+            else {
+                this.showUrlError(e);
+            }
         });
     }
     platformUnavailable(error) {
@@ -527,6 +626,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         FeedbackService.doctorEndpoint = this.doctorEndpoint;
         RulesetService.doctorEndpoint = this.doctorEndpoint;
         ModelService.doctorEndpoint = this.doctorEndpoint;
+        this.connectToBroker();
         this.graphBag = this.bagManager.getBag(GraphBag);
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         if (this.docBag) {
@@ -635,7 +735,6 @@ let TheDoctor = class TheDoctor extends LitElement {
             else {
                 this.manageRuleset.rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
             }
-            this.loadingOverlay.hide();
             setTimeout(() => {
                 this.manageRuleset.buildRulesets();
                 if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
@@ -817,9 +916,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         LintingService.startSession().then((session) => {
             this.session = session;
             // bootstrap async
-            setTimeout(() => {
-                this.boostrap();
-            });
+            // setTimeout(() => {
+            //     this.boostrap();
+            // });
             LintingService.fetchAllHowToFix().then((result) => {
                 if (result) {
                     result.forEach((howToFix) => {
@@ -973,6 +1072,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         }, this.debounceTime);
     }
     boostrap() {
+        // if the url is set in the query string, fetch it and run a lint with the URL
+        const url = new URL(window.location.href);
+        const urlParam = url.searchParams.get('url');
+        if (urlParam) {
+            this.urlInput.value = urlParam;
+            this.lintSpec('', urlParam);
+            return;
+        }
         if (this.editor.getValue() === '') {
             LintingService.bootstrapEditor().then((result) => {
                 this.editor.setValue(result, true);
@@ -1137,6 +1244,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 <sl-icon-button class="collapse-side" name="chevron-bar-right"
                                 @click="${this.toggleSidebar}"></sl-icon-button>
             </div>`;
+        let sparks = new PixelSparks();
         return html `
             ${welcomeBox}
             ${this.toastManager}
@@ -1167,7 +1275,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 ${this.activitySpinner}
                 ${this.errorBanner}
                 ${overlay}
-                
+
                 <sl-split-panel class="split-panel-explorer" position="12">
                     <sl-icon id="split-divider-tree" slot="divider" name="grip-vertical"></sl-icon>
                     <div slot="start" class="model-tree">
@@ -1180,10 +1288,10 @@ let TheDoctor = class TheDoctor extends LitElement {
                                 ${this.detailsDrawer}
                                 <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
                                               id="editor-controls">
+
                                     <sl-tab slot="nav" panel="spec" class="tab" id="spec"
                                             @click="${this.closeExplorer}">
-                                        OpenAPI
-                                        Spec
+                                        OpenAPI Spec
                                     </sl-tab>
                                     <sl-tab slot="nav" panel="explorer" class="tab" id="explorer"
                                             @click="${this.toggleExplorer}">Explorer
@@ -1192,11 +1300,45 @@ let TheDoctor = class TheDoctor extends LitElement {
                                             @click="${this.closeExplorer}">
                                         Ruleset ${rulesetPulsePill}
                                     </sl-tab>
-                                    <sl-tab-panel name="spec" class="tab-panel">${this.editor}</sl-tab-panel>
+
+                                    <sl-tab-panel name="spec" class="tab-panel">
+
+                                        <div class="controls">
+                                            <div style="margin-top: 8px; margin-right: 5px;">URL:</div>
+                                            <sl-input id="url-input" class="url-input"
+                                                      placeholder="https://api.pb33f.io/train-travel.yaml" size="small"
+                                                      @keydown="${this.validateUrl}"
+                                                      @keyup="${this.validateUrl}"></sl-input>
+                                            <sl-button id="url-input-button" class="url-input-button close-button"
+                                                       size="small" variant="neutral" disabled
+                                                       @click="${this.fetchUrl}">Fetch
+                                            </sl-button>
+                                        </div>
+                                        <div class="main-view">
+                                            <div id="editor-url-overlay" class="editor-url-overlay">
+                                                <div id="url-spinner">
+                                                    <div class="pb33f-loader">
+                                                        <div class="spin"></div>
+                                                        Fetching from URL '<strong>${this.activeURL}</strong>'...
+                                                    </div>
+                                                </div>
+                                                <div id="url-problem" class="url-problem">
+                                                    <pb33f-attention-box type="warning" headerText="Problem with URL">
+                                                        <h4>Error: ${this.urlErrorCode}</h4>
+                                                        <p>${this.urlErrorMessage}</p>
+                                                        <sl-button @click="${this.hideUrlError}">OK</sl-button>
+                                                        <p></p>
+                                                    </pb33f-attention-box>
+                                                </div>
+                                            </div>
+                                            ${this.editor}
+                                        </div>
+                                    </sl-tab-panel>
                                     <sl-tab-panel name="ruleset" class="tab-panel">${this.rulesetEditor}</sl-tab-panel>
                                     <sl-tab-panel name="explorer" class="tab-panel"
                                                   @mouseleave="${this.ungrabExplorer}">${this.explorer}
                                     </sl-tab-panel>
+
                                 </sl-tab-group>
                             </div>
                             ${mainPanelView}
@@ -1205,12 +1347,50 @@ let TheDoctor = class TheDoctor extends LitElement {
                 </sl-split-panel>
                 ${this.statusBar}
             </div>`;
+        // docs   <iframe src="/docs.html" width="100%" height="100%"
+        //                                                 style="border: none"></iframe>
+        //    <sl-tab slot="nav" panel="docs" class="tab" id="docs">
+        //                                         Docs
+        //                                     </sl-tab>
+        // <sl-tab-panel name="docs" class="tab-panel">
+        //                                     </sl-tab-panel>
+    }
+    fetchUrl() {
+        this.activeURL = this.urlInput.value;
+        this.lintSpec('', this.urlInput.value);
+    }
+    hideUrlError() {
+        this.urlProblem.style.display = 'none';
+        this.urlOverlay.style.display = 'none';
+        this.urlSpinner.style.display = 'none';
+    }
+    showUrlError(e) {
+        this.urlErrorCode = e.status;
+        this.urlErrorMessage = e.detail;
+        this.urlSpinner.style.display = 'none';
+        this.urlOverlay.style.display = 'block';
+        this.urlProblem.style.display = 'block';
+        this.requestUpdate();
+    }
+    validateUrl(evt) {
+        if (evt.key === "Enter") {
+            this.fetchUrl();
+        }
+        const urlValue = this.urlInput.value;
+        if (urlValue.match(urlRegex)) {
+            this.urlInputButton.disabled = false;
+            this.urlInputButton.classList.remove('close-button');
+        }
+        else {
+            this.urlInputButton.disabled = true;
+            this.urlInputButton.classList.add('close-button');
+        }
     }
     ungrabExplorer() {
         this.explorer.grabbed = false;
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);
@@ -1220,6 +1400,9 @@ __decorate([
 __decorate([
     query('#viewerPanel')
 ], TheDoctor.prototype, "viewerPanel", void 0);
+__decorate([
+    query('#explorer')
+], TheDoctor.prototype, "explorerPanel", void 0);
 __decorate([
     query('sl-tab-group#manager-controls')
 ], TheDoctor.prototype, "controlTabGroup", void 0);
@@ -1241,6 +1424,12 @@ __decorate([
 __decorate([
     query('div.problems-data')
 ], TheDoctor.prototype, "problemsDataDiv", void 0);
+__decorate([
+    query('#url-input-button')
+], TheDoctor.prototype, "urlInputButton", void 0);
+__decorate([
+    query('#url-input')
+], TheDoctor.prototype, "urlInput", void 0);
 __decorate([
     property({ type: Boolean })
 ], TheDoctor.prototype, "unavailable", void 0);
@@ -1265,7 +1454,20 @@ __decorate([
 __decorate([
     state()
 ], TheDoctor.prototype, "explorerVisible", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "activeURL", void 0);
+__decorate([
+    query('#editor-url-overlay')
+], TheDoctor.prototype, "urlOverlay", void 0);
+__decorate([
+    query('#url-problem')
+], TheDoctor.prototype, "urlProblem", void 0);
+__decorate([
+    query('#url-spinner')
+], TheDoctor.prototype, "urlSpinner", void 0);
 TheDoctor = __decorate([
     customElement("pb33f-doctor")
 ], TheDoctor);
 export { TheDoctor };
+const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;