feat(lesy-pilot-ui): add middlewares panel

Author: lokesh-coder

packages/misc/pilot-ui/src/app/components/footer/footer.template.html

@@ -53,7 +53,17 @@
       <i class="{{consolePosClassName}} leading-none text-xl"></i>
     </li>
   </ng-container>
+
   <li class="flex items-center ml-auto">
+    <a
+      class="flex items-center p-3 cursor-pointer"
+      [panel]="middlewareTpl"
+      [popoverOn]="'CLICK'"
+    >
+      <i class="ri-mind-map leading-none text-xl mr-2"></i>
+    </a>
+  </li>
+  <li class="flex items-center">
     <a
       class="flex items-center p-3 cursor-pointer"
       [popover]="shortcutsTpl"
@@ -75,6 +85,22 @@
   </li>
 </ul>
 
+<ng-template #middlewareTpl let-toppy>
+  <div class="bg-white h-full p-4 flex flex-col overflow-scroll">
+    <div class="flex-1">
+      <pilot-middlewares></pilot-middlewares>
+    </div>
+    <div class="flex justify-center">
+      <button
+        class="bg-gray-200 rounded-md p-5 text-center text-gray-800"
+        (click)="toppy.close()"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template #shortcutsTpl>
   <div class="p-5">
     <div class="bg-white p-4 shadow-lg rounded-lg">
@@ -86,7 +112,7 @@
       <ul class="list-inline">
         <li
           *ngFor="let keys of getRegisteredHotKeys()"
-          class="flex items-center"
+          class="flex items-center mt-2"
         >
           <span
             class="font-bold text-yellow-900 bg-yellow-500 text-xs rounded px-2 py-1 mr-2 uppercase"

packages/misc/pilot-ui/src/app/components/middlewares/middlewares.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { Store } from "@ngxs/store";
+import { MiddlewaresModel, PilotState } from "../../pilot.models";
+
+@Component({
+  selector: "pilot-middlewares",
+  templateUrl: "./middlewares.template.html",
+})
+export class MiddlewaresComponent implements OnInit {
+  middlewares = {};
+  constructor(private store: Store) {}
+  ngOnInit() {
+    const rawMiddlewares = this.store.selectSnapshot<any>(
+      (state: PilotState) => state.middlewares,
+    );
+    this.middlewares = this.formatMiddlewaresShape(rawMiddlewares);
+  }
+
+  private formatMiddlewaresShape(middlewares: MiddlewaresModel): any {
+    const mw = [];
+    const hookNames = Object.keys(middlewares);
+    hookNames.forEach((hook) => {
+      mw.push({
+        hookName: hook,
+        hooks: middlewares[hook],
+      });
+    });
+    console.log("mw", mw);
+    return mw;
+  }
+}

packages/misc/pilot-ui/src/app/components/middlewares/middlewares.template.html

@@ -0,0 +1,23 @@
+<!-- <pre>{{middlewares|json}}</pre> -->
+<h3 class="font-display text-violet text-3xl mb-2">
+  Middlewares
+</h3>
+
+<ng-container *ngFor="let mw of middlewares">
+  <ng-container *ngIf="mw.hooks.length">
+    <div class="py-4">
+      <h3 class="font-display text-gray-600 text-lg lowercase mb-2">
+        {{mw.hookName}} ({{mw.hooks.length}})
+      </h3>
+      <div
+        *ngFor="let hook of mw.hooks"
+        class="bg-gray-100 p-2 mb-2 rounded-md"
+      >
+        <div class="text-lg text-gray-600">
+          {{hook.description||'no desc'}}
+        </div>
+        <div class="ellipsize-left text-gray-700 text-sm">{{hook.source}}</div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

packages/misc/pilot-ui/src/app/directives/panel/panel.directive.ts

@@ -0,0 +1,41 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+} from "@angular/core";
+import { Toppy, OutsidePlacement, SlidePlacement, SlidePosition } from "toppy";
+
+@Directive({
+  selector: "[panel]",
+})
+export class PanelDirective implements OnInit {
+  private panelPosition;
+  private panel;
+  @Input("panel") panelContent;
+  @Input() panelOn = "CLICK";
+
+  constructor(private toppy: Toppy) {}
+
+  ngOnInit() {
+    this.panelPosition = new SlidePosition({
+      placement: SlidePlacement.RIGHT,
+      width: "30%",
+    });
+    this.panel = this.toppy
+      .position(this.panelPosition)
+      .config({
+        backdrop: true,
+        closeOnDocClick: this.panelOn === "CLICK",
+      })
+      .content(this.panelContent)
+      .create();
+  }
+
+  @HostListener("click") onClick() {
+    if (this.panelOn === "CLICK") {
+      this.panel.toggle();
+    }
+  }
+}

packages/misc/pilot-ui/src/app/pilot.main.ts

@@ -13,15 +13,14 @@ import {
   SetConsolePanelHeight,
   ToggleConsolePanel,
   LoadConfig,
+  ToggleConsolePosition,
 } from "./store/actions/common.actions";
 import { ToppyControl, Toppy, GlobalPosition, InsidePlacement } from "toppy";
 import { NotificationModel } from "./pilot.models";
 import { ToastComponent } from "./components";
 import { Hotkeys } from "./services/hotkeys.service";
 import { FetchDefaultProject } from "./store/actions/project.actions";
 
-const HOTKEY = "`";
-
 @Component({
   selector: "pilot-main",
   templateUrl: "./pilot.template.html",
@@ -67,8 +66,12 @@ export class PilotMain implements OnInit {
     });
 
     this.hotkeys$
-      .addShortcut(HOTKEY, "backquote", "Toggle console panel")
+      .addShortcut("`", "backquote", "Toggle console panel")
       .subscribe(() => this.store.dispatch(new ToggleConsolePanel()));
+
+    this.hotkeys$
+      .addShortcut("1", "one", "Toggle console position")
+      .subscribe(() => this.store.dispatch(new ToggleConsolePosition()));
   }
   onDragEnd({ sizes: [, height] }) {
     this.store.dispatch(new SetConsolePanelHeight(height));

packages/misc/pilot-ui/src/app/pilot.models.ts

@@ -18,6 +18,16 @@ export interface CommandModel {
   group: string;
 }
 
+export interface MiddlewareModel {
+  on: string;
+  path: string;
+  description: string;
+}
+
+export interface MiddlewaresModel {
+  [key: string]: MiddlewareModel;
+}
+
 export interface ProjectModel {
   name: string;
   path: string;
@@ -62,10 +72,19 @@ export interface PilotState {
   projects: ProjectModel[];
   project: ProjectModel;
   commands: CommandModel[];
+  middlewares: MiddlewaresModel;
   command: CommandModel;
   common: CommonModel;
   logs: LogsModel;
   notification: NotificationModel;
   prompt: PromptModel;
   runners: RunnerModel;
 }
+
+export interface ShortcutKeyModel {
+  key: string;
+  name: string;
+  description: string;
+}
+
+export type ShortcutKeysModel = ShortcutKeyModel[];

packages/misc/pilot-ui/src/app/pilot.module.ts

@@ -9,6 +9,7 @@ import { MarkdownModule } from "ngx-markdown";
 
 /* Components */
 import { CommandComponent } from "./components/command/command.component";
+import { MiddlewaresComponent } from "./components/middlewares/middlewares.component";
 import { ConsoleComponent } from "./components/console/console.component";
 import { FooterComponent } from "./components/footer/footer.component";
 import { HeaderComponent } from "./components/header/header.component";
@@ -21,6 +22,7 @@ import { HeadingComponent } from "./components/heading/heading.component";
 /* Directives */
 import { TooltipDirective } from "./directives/tooltip/tooltip.directive";
 import { PopoverDirective } from "./directives/popover/popover.directive";
+import { PanelDirective } from "./directives/panel/panel.directive";
 import { CopyDirective } from "./directives/copy/copy.directive";
 
 /* Pages */
@@ -36,6 +38,7 @@ import { ProjectsState } from "./store/states/projects.state";
 import { ProjectState } from "./store/states/project.state";
 import { CommandsState } from "./store/states/commands.state";
 import { CommandState } from "./store/states/command.state";
+import { MiddlewaresState } from "./store/states/middlewares.state";
 import { CommonState } from "./store/states/common.state";
 import { LogsState } from "./store/states/logs.state";
 import { NotificationState } from "./store/states/notification.state";
@@ -62,10 +65,12 @@ import { PilotMain } from "./pilot.main";
     HeaderComponent,
     HeadingComponent,
     CommandComponent,
+    MiddlewaresComponent,
     ConsoleComponent,
     FooterComponent,
     TooltipDirective,
     PopoverDirective,
+    PanelDirective,
     CopyDirective,
     SettingsPage,
     RunPage,
@@ -86,6 +91,7 @@ import { PilotMain } from "./pilot.main";
         ProjectState,
         CommandsState,
         CommandState,
+        MiddlewaresState,
         CommonState,
         LogsState,
         NotificationState,

packages/misc/pilot-ui/src/app/services/hotkeys.service.ts

@@ -26,8 +26,8 @@ export class Hotkeys {
     const event = `keydown.${merged.keys}`;
     this.registeredKeys.push([key, name, description]);
 
-    return new Observable(observer => {
-      const handler = e => {
+    return new Observable((observer) => {
+      const handler = (e) => {
         e.preventDefault();
         observer.next(e);
       };

packages/misc/pilot-ui/src/app/services/middlewares.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { WsService } from "./ws.service";
+import { filter, take, map } from "rxjs/operators";
+import { Observable } from "rxjs";
+
+@Injectable({ providedIn: "root" })
+export class MiddlewaresService {
+  constructor(private wsService: WsService) {}
+
+  requestMiddlewares() {
+    this.wsService.send("requestAllMiddlewares");
+  }
+
+  onRequestMiddlewares(): Observable<any> {
+    return this.wsService.listen().pipe(
+      filter((a) => a && a.onRequestAllMiddlewares),
+      take(1),
+      map((req) => req.onRequestAllMiddlewares),
+    );
+  }
+}

packages/misc/pilot-ui/src/app/store/actions/middlewares.actions.ts

@@ -0,0 +1,8 @@
+export class LoadMiddlewares {
+  static readonly type = "[Middlewares] Load middlewares";
+}
+
+export class UpdateMiddlewares {
+  static readonly type = "[Middlewares] Update middlewares";
+  constructor(public middlewares: any) {}
+}