feat(lesy-pilot-ui): add workspace screen

Author: lokesh-coder

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

@@ -9,8 +9,8 @@ import { AddLog, ReverseLogs } from "../../store/actions/logs.actions";
   templateUrl: "./console.template.html",
 })
 export class ConsoleComponent implements OnInit {
-  @Select(state => state.logs.logs)
-  logs$: Observable<string[]>;
+  @Select((state) => state.logs.logs)
+  logs$: Observable<Array<Array<string | number>>>;
 
   constructor(private store: Store, private actions$: Actions) {}
 
@@ -31,4 +31,8 @@ export class ConsoleComponent implements OnInit {
         });
       });
   }
+
+  formatTime(ts: number) {
+    return new Date(ts).toLocaleTimeString();
+  }
 }

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

@@ -22,10 +22,18 @@
         <p class="text-center text-sm">Console panel</p>
       </div>
     </div>
-    <div class="pt-6 h-auto  text-green-200 font-mono " id="console">
-      <pre class="bg-console-bg p-4 h-auto text-white" #consoleEl>
-<span *ngFor="let log of (logs$|async)" [innerHTML]="log|safeHtml"></span>
-</pre>
+    <div class="pt-6 h-auto text-green-200 font-mono" id="console">
+      <div class="bg-console-bg p-4 h-auto text-white" #consoleEl>
+        <ng-container *ngFor="let log of (logs$|async)">
+          <div class="flex">
+            <div
+              class="w-24 mr-2 opacity-50"
+              [innerHTML]="formatTime(log[0])"
+            ></div>
+            <pre [innerHTML]="log[1]|safeHtml"></pre>
+          </div>
+        </ng-container>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,6 +1,9 @@
 import { Component } from "@angular/core";
 import { Store, Select } from "@ngxs/store";
-import { ToggleConsolePanel } from "../../store/actions/common.actions";
+import {
+  ToggleConsolePanel,
+  SetConsolePanelFullScreen,
+} from "../../store/actions/common.actions";
 import { Observable } from "rxjs";
 import { ClearLogs, ReverseLogs } from "../../store/actions/logs.actions";
 import { Hotkeys } from "../../services/hotkeys.service";
@@ -13,14 +16,23 @@ export class FooterComponent {
   @Select((state) => state.command)
   selectedCommand$: Observable<object>;
 
-  @Select((state) => (state.common.consoleHeight === 0 ? "CLOSED" : "OPEN"))
-  consoleStatus$: Observable<"CLOSED" | "OPEN">;
+  @Select((state) => {
+    const height = state.common.consoleHeight;
+    if (height === 0) return "CLOSED";
+    if (height === 100) return "FULLSCREEN";
+    return "OPEN";
+  })
+  consoleStatus$: Observable<"CLOSED" | "OPEN" | "FULLSCREEN">;
 
   constructor(private store: Store, private hotkeys: Hotkeys) {}
 
   toggleConsole() {
     this.store.dispatch(new ToggleConsolePanel());
   }
+
+  setConsoleFullScreen() {
+    this.store.dispatch(new SetConsolePanelFullScreen());
+  }
   clearLogs() {
     this.store.dispatch(new ClearLogs());
   }

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

@@ -5,19 +5,19 @@
   <ng-container *ngIf="consoleStatus$|async as consoleStatus">
     <li
       (click)="toggleConsole()"
-      class="flex items-center p-3 cursor-pointer  text-gray-600 hover:text-vio-500"
-      [class.hidden]="consoleStatus=='OPEN'"
-      tooltip="open console"
+      class="flex items-center p-3 cursor-pointer text-gray-600 hover:text-vio-500"
+      [class.hidden]="consoleStatus=='OPEN' || consoleStatus=='FULLSCREEN'"
+      tooltip="show console"
     >
       <i class="ri-eye-line leading-none text-xl"></i>
     </li>
     <li
       (click)="toggleConsole()"
       class="flex items-center p-3 cursor-pointer text-gray-600 hover:text-vio-500"
       [class.hidden]="consoleStatus=='CLOSED'"
-      tooltip="close console"
+      tooltip="hide console"
     >
-      <i class="ri-eye-off-line leading-none text-xl "></i>
+      <i class="ri-eye-off-line leading-none text-xl"></i>
     </li>
     <li
       (click)="clearLogs()"
@@ -36,6 +36,14 @@
     >
       <i class="ri-exchange-box-line rotate-90 leading-none text-xl"></i>
     </li>
+    <li
+      (click)="setConsoleFullScreen()"
+      tooltip="Full screen"
+      class="flex items-center p-3 cursor-pointer text-gray-600 hover:text-vio-500"
+      [class.hidden]="consoleStatus=='CLOSED' || consoleStatus=='FULLSCREEN'"
+    >
+      <i class="ri-fullscreen-fill leading-none text-xl"></i>
+    </li>
   </ng-container>
   <li class="flex items-center ml-auto">
     <a
@@ -74,7 +82,7 @@
         >
           <span
             class="font-bold text-yellow-900 bg-yellow-500 text-xs rounded px-2 py-1 mr-2 uppercase"
-            style="line-height: 14px"
+            style="line-height: 14px;"
             >{{keys[0]}}{{keys[1]}}
           </span>
           <span class="text-gray-500 text-base"> {{keys[2]}}</span>

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

@@ -8,12 +8,13 @@ import { Observable } from "rxjs";
 })
 export class HeaderComponent {
   menuItems = [];
-  @Select(state => state.common.config)
+  @Select((state) => state.common.config)
   webConfig$: Observable<object>;
 
   ngOnInit() {
     this.menuItems = [
       { name: "Home", path: "/", icon: "ri-home-4-line" },
+      { name: "Projects", path: "/projects", icon: "ri-folder-line" },
       { name: "Run", path: "/run", icon: "ri-terminal-line" },
       { name: "Config", path: "/config", icon: "ri-settings-5-line" },
       { name: "Help", path: "/help", icon: "ri-questionnaire-line" },

packages/misc/pilot-ui/src/app/modules/query/components/form/form.template.html

@@ -5,12 +5,10 @@
   id="pilotForm"
 >
   <div
-    class=" bg-white rounded-xl border border-gray-400 mt-5 p-6 highlight:border-transparent highlight:mt-0"
+    class="bg-white rounded-xl border border-gray-400 mt-5 p-6 highlight:border-transparent highlight:mt-0"
     *ngIf="questions.length > 0"
   >
-    <h5
-      class="mb-6 text-lg text-gray-800 font-display font-medium highlight:hidden"
-    >
+    <h5 class="mb-6 text-lg text-gray-800 font-medium highlight:hidden">
       Arguments
     </h5>
 
@@ -27,7 +25,7 @@
 
   <button
     type="submit"
-    class="flex mx-auto bg-green-500 py-4 px-6 mt-6 rounded text-white font-semibold shadow-lg  focus:shadow-none disabled:opacity-50 focus:outline-none highlight:mt-0"
+    class="flex mx-auto bg-green-500 py-4 px-6 mt-6 rounded text-white font-semibold shadow-lg focus:shadow-none disabled:opacity-50 focus:outline-none highlight:mt-0"
     [disabled]="!form.valid"
   >
     <i class="ri-send-plane-2-line mr-2"></i> Run command

packages/misc/pilot-ui/src/app/modules/query/components/input/input.template.html

@@ -9,12 +9,12 @@
     >
     <div [ngSwitch]="question.controlType">
       <div
-        class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-vio-500 border border-gray-500 rounded-sm bg-gray-100"
+        class="flex flex-wrap items-stretch w-full mb-4 relative focus-within:border-vio-500 border border-gray-500 bg-gray-100 rounded-md"
         *ngSwitchCase="'textbox'"
       >
         <div class="flex">
           <span
-            class="flex items-center leading-normal bg-gray-lighter rounded rounded-r-none  px-2 whitespace-no-wrap text-grey-dark text-sm"
+            class="flex items-center leading-normal bg-gray-lighter rounded rounded-r-none px-2 whitespace-no-wrap text-grey-dark text-sm"
             ><i class="ri-keyboard-box-fill text-2xl text-gray-500"></i
           ></span>
         </div>

packages/misc/pilot-ui/src/app/pages/projects/projects.page.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from "@angular/core";
+import { CommandsService } from "../../services/commands.service";
+import { map } from "rxjs/operators";
+import { Observable, combineLatest } from "rxjs";
+import { ActivatedRoute } from "@angular/router";
+import { Select, Store } from "@ngxs/store";
+import { ProjectsService } from "../../services/projects.service";
+import { LoadProjects } from "../../store/actions/projects.actions";
+import { SelectedProject } from "../../store/actions/project.actions";
+import { LoadConfig } from "../../store/actions/common.actions";
+
+@Component({
+  selector: "pilot-projects-page",
+  templateUrl: "./projects.template.html",
+})
+export class ProjectsPage implements OnInit {
+  config: object;
+  projects: any[];
+  selectedProject;
+
+  @Select((state) => state.projects)
+  projects$: Observable<string[]>;
+
+  @Select((state) => state.common.config)
+  config$: Observable<object>;
+
+  constructor(
+    private store: Store,
+    private route: ActivatedRoute,
+    private ps: ProjectsService,
+  ) {
+    this.store.dispatch(new LoadProjects());
+  }
+
+  ngOnInit() {}
+  switchProject(name) {
+    this.store.dispatch(new SelectedProject(name));
+    this.store.dispatch(new LoadConfig());
+  }
+}

packages/misc/pilot-ui/src/app/pages/projects/projects.template.html

@@ -0,0 +1,9 @@
+<div class="w-full sm:w-2/3 mx-auto px-6 sm:px-0">
+  <div
+    *ngFor="let project of (projects$|async)"
+    class="p-3"
+    (click)="switchProject(project)"
+  >
+    {{project.name}}
+  </div>
+</div>

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

@@ -18,6 +18,7 @@ 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 = "`";
 
@@ -48,6 +49,7 @@ export class PilotMain implements OnInit {
     this.store.dispatch(new LoadLogs());
     this.store.dispatch(new LoadConfig());
     this.store.dispatch(new ListenForNotification());
+    this.store.dispatch(new FetchDefaultProject());
 
     this.notification$.subscribe((n) => {
       if (!n.message) {