feat: display instance information (#83)

Author: andrei2699

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.html

@@ -0,0 +1,18 @@
+<h1 mat-dialog-title style="text-align: center">Instance not allocated</h1>
+<div mat-dialog-content>
+  There is no analysis instance allocated for the project. Having an instance is required for running analysis
+  <br />
+  <p>Do you want to allocate it now ?</p>
+
+  @if (allocateInstanceHandler.isLoading()) {
+    <app-loading-progress-bar title="Allocating instance..."></app-loading-progress-bar>
+  }
+
+  @if (allocateInstanceHandler.error()) {
+    <app-error-state [error]="allocateInstanceHandler.error()!"></app-error-state>
+  }
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onAllocateClick()">ALLOCATE</button>
+  <button mat-button (click)="onCloseClick()">CLOSE</button>
+</div>

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.scss

@@ -0,0 +1,56 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { InstanceService } from '../../../services/instances/instance.service';
+import { ErrorStateComponent } from '../../error-state/error-state.component';
+import { LoadingProgressBarComponent } from '../../loading-progress-bar/loading-progress-bar.component';
+import { apiHandler } from '../../../utils/apiHandler';
+
+export interface InstanceNotAllocatedDialogData {
+  projectId: string;
+}
+
+@Component({
+  selector: 'app-instance-not-allocated-dialog',
+  templateUrl: './instance-not-allocated-dialog.component.html',
+  styleUrls: ['./instance-not-allocated-dialog.component.scss'],
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatExpansionModule,
+    MatSelectModule,
+    MatButtonModule,
+    FormsModule,
+    ErrorStateComponent,
+    LoadingProgressBarComponent,
+  ],
+})
+export class InstanceNotAllocatedDialog {
+  allocateInstanceHandler = apiHandler(
+    (params: { projectId: string }) => this.instanceService.allocateInstance(params.projectId),
+    () => {
+      this.dialogRef.close();
+    }
+  );
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: InstanceNotAllocatedDialogData,
+    public dialogRef: MatDialogRef<InstanceNotAllocatedDialog>,
+    private instanceService: InstanceService
+  ) {}
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+
+  onAllocateClick(): void {
+    this.allocateInstanceHandler.execute({
+      projectId: this.data.projectId,
+    });
+  }
+}

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.ts

@@ -13,7 +13,11 @@
     </as-split-area>
 
     <as-split-area size="35">
-      <app-analysis-output [projectId]="projectId()!" [analysisId]="analysisId()!" />
+      @if (analysisId()) {
+        <app-analysis-output [projectId]="projectId()!" [analysisId]="analysisId()!" />
+      } @else {
+        <div>There are no results since no analysis was run yet</div>
+      }
     </as-split-area>
   </as-split>
 </div>

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.html

@@ -6,6 +6,7 @@ import { AnalysisOutputComponent } from './output/analysis-output.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TreeNode } from '../../../../types/tree-node';
+import { InstanceService } from '../../../../services/instances/instance.service';
 
 @Component({
   selector: 'app-analysis',
@@ -16,6 +17,7 @@ import { TreeNode } from '../../../../types/tree-node';
 export class AnalysisComponent {
   projectId = signal<string | undefined>(undefined);
   analysisId = signal<string | undefined>(undefined);
+  instanceId = signal<string | undefined>(undefined);
 
   selectedFileId = signal<string | null>(null);
 
@@ -24,15 +26,25 @@ export class AnalysisComponent {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private instanceService: InstanceService
   ) {
     route.queryParamMap.subscribe((params) => {
       this.selectedFileId.set(params.get('fileId'));
     });
 
     route.parent?.paramMap.pipe(takeUntilDestroyed()).subscribe({
       next: (paramMap) => {
-        this.projectId.set(paramMap.get('id') ?? undefined);
+        const id = paramMap.get('id');
+        this.projectId.set(id ?? undefined);
+
+        if (id) {
+          this.instanceService.getCurrentInstance(id).subscribe({
+            next: (instanceInfo) => {
+              this.instanceId.set(instanceInfo.id);
+            },
+          });
+        }
       },
     });
   }

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.ts

@@ -2,7 +2,8 @@
 
 <div class="currently-loaded-models-content">
   <span>Used Linkers: </span>
-  @for (linker of instanceInfo().linkers; track linker) {
+  <!-- TODO FIXIT(#70): populate from api-->
+  @for (linker of []; track linker) {
     {{ linker }}
   }
   <div>

ScriptBeeClient/src/app/pages/projects/project-details/model/currently-loaded-models/currently-loaded-models.component.html

@@ -13,7 +13,8 @@ export class CurrentlyLoadedModelsComponent {
   instanceInfo = input.required<InstanceInfo>();
 
   loadedFiles = computed<TreeNode[]>(() => {
-    return convertToTreeNodes(this.instanceInfo().loadedModels);
+    // TODO FIXIT(#70): populate from api
+    return convertToTreeNodes({});
   });
 }
 

ScriptBeeClient/src/app/pages/projects/project-details/model/currently-loaded-models/currently-loaded-models.component.ts

@@ -0,0 +1,6 @@
+<div class="project-model-section-title project-model-content-after-divider">Instance Information</div>
+
+<div class="instance-info-div">
+  <div>Instance Id: {{ instanceInfo().id }}</div>
+  <div>Creation Date: {{ instanceInfo().creationDate | date }}</div>
+</div>

ScriptBeeClient/src/app/pages/projects/project-details/model/instance-info/instance-info.component.html

@@ -0,0 +1,3 @@
+.instance-info-div {
+  margin-left: 8px;
+}

ScriptBeeClient/src/app/pages/projects/project-details/model/instance-info/instance-info.component.scss

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { InstanceInfo } from '../../../../../types/instance';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-instance-info',
+  templateUrl: './instance-info.component.html',
+  styleUrls: ['./instance-info.component.scss'],
+  imports: [DatePipe],
+})
+export class InstanceInfoComponent {
+  instanceInfo = input.required<InstanceInfo>();
+}