New Features:

1. AI for creating system tests working
New Pages:
Bugs Corrected:
To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph result

src/app/pages/software_testing/system_tests/create-system-test/create-system-test.module.ts

@@ -8,14 +8,16 @@ import { CreateSystemTestPageRoutingModule } from './create-system-test-routing.
 
 import { CreateSystemTestPage } from './create-system-test.page';
 import {ComponentsModule} from "../../../../components/components.module";
+import {MarkdownComponent} from "ngx-markdown";
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
         IonicModule,
         CreateSystemTestPageRoutingModule,
-        ComponentsModule
+        ComponentsModule,
+        MarkdownComponent
     ],
   declarations: [CreateSystemTestPage]
 })

src/app/pages/software_testing/system_tests/create-system-test/create-system-test.page.html

@@ -13,17 +13,28 @@
       <ion-col size="12" size-md="12" size-lg="12" class="">
         <ion-card class="min-h-full flex flex-col p-8">
           <ion-card-title class="bg-gray-600 p-2">
+            <div class="flex flex-row items-center w-full">
+            <div class="w-full m-2">
             <ion-input placeholder="Test Title" type="text" class="text-3xl" [(ngModel)]="systemTest.title" ></ion-input>
+            </div>
+            </div>
           </ion-card-title>
           <br>
           <ion-card-title class="bg-gray-600 p-2">
-            <ion-textarea placeholder="Test Description" type="text" class="text-sm" [(ngModel)]="systemTest.description"></ion-textarea>
+            <div class="flex flex-row items-center w-full">
+              <div class="w-full m-2">
+                <ion-textarea placeholder="Test Description" type="text" class="text-sm" [(ngModel)]="systemTest.description"></ion-textarea>
+              </div>
+              <div class=" rounded-full p-3 bg-purple-800">
+                <ion-icon name="color-wand-outline" (click)="askAIForHelp('description')"></ion-icon>
+              </div>
+            </div>
           </ion-card-title>
           <br>
           <ion-card-title class="">
             <div class="flex flex-row items-center ">
               <h1 class="text-4xl">Test Steps...</h1>
-              <div class="flex flex-row items-center bg-cyan-800 m-4 p-1" id="open-modal">
+              <div class="flex flex-row items-center bg-cyan-800 m-4 p-1" id="open-modal" (click)="chatStyle()">
                 <ion-icon name="add"></ion-icon>
               </div>
             </div>
@@ -48,7 +59,7 @@ <h1>{{step.stepTitle}}</h1>
     </ion-row>
   </ion-grid>
 
-  <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
+  <ion-modal trigger="open-modal" (willPresent)="chatStyle()" (willDismiss)="onWillDismiss($event)">
     <ng-template>
       <ion-header>
         <ion-toolbar>
@@ -64,10 +75,44 @@ <h1>{{step.stepTitle}}</h1>
       <ion-content class="flex flex-col justify-center items-center">
         <ion-card class="m-2 p-2">
             <ion-label>Step</ion-label>
+          <div class="flex-row flex justify-center items-center w-full">
+            <div class="w-full m-2">
             <ion-input type="text" [(ngModel)]="testStepTitle"></ion-input>
+            </div>
+          </div>
           <br>
-            <ion-label>Expected</ion-label>
+          <ion-label>Expected</ion-label>
+          <div class="flex-row flex justify-center items-center w-full">
+            <div class="w-full m-2">
             <ion-input type="text" [(ngModel)]="testExpectedResults"></ion-input>
+            </div>
+          </div>
+        </ion-card>
+        <ion-card>
+          <ion-card-content>
+
+              @if (disableAI){
+                <div class=" rounded-full p-3 bg-gray-400 flex flex-row justify-center items-center">
+                <ion-icon name="color-wand-outline" class="hidden"></ion-icon>
+                </div>
+                }
+
+              @if (!disableAI){
+                <div class=" rounded-full p-3 bg-purple-800 flex flex-row justify-center items-center">
+                <ion-icon name="color-wand-outline" (click)="askAIForHelp('step')" ></ion-icon>
+                </div>
+              }
+
+          </ion-card-content>
+          <ion-card-content>
+            <ion-label>DevProbe AI Answer</ion-label>
+          </ion-card-content>
+          <ion-card-content>
+
+            @for (aiStep of aiSteps; track aiSteps){
+              <markdown id="mk-1" class="text-white ">{{aiStep.message}}</markdown>
+            }
+          </ion-card-content>
         </ion-card>
       </ion-content>
     </ng-template>

src/app/pages/software_testing/system_tests/create-system-test/create-system-test.page.ts

@@ -1,9 +1,11 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, inject, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {SystemTest} from "../../../../interfaces/system-test";
 import {AlertController, IonModal, LoadingController} from "@ionic/angular";
 import {SystemTestService} from "../../../../services/system-test.service";
 import {User} from "../../../../interfaces/user";
+import {getGenerativeModel, VertexAI} from "@angular/fire/vertexai-preview";
+import {AiMessage} from "../../../../interfaces/ai-message";
 
 @Component({
   selector: 'app-create-system-test',
@@ -29,11 +31,22 @@ export class CreateSystemTestPage implements OnInit {
   private user: User = {};
   private orgName: string = '';
 
+  vertexAI: VertexAI = inject(VertexAI);
+  model = getGenerativeModel(this.vertexAI, { model: "gemini-1.5-flash" });
+  aiSteps:AiMessage[] = [];
+  extraData: string = '';
+  disableAI: boolean = false;
+
+
+
+
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private alertCtrl: AlertController,
     private systemTestService: SystemTestService,
-    private loadingCtrl: LoadingController
+    private loadingCtrl: LoadingController,
+
   ) { }
 
   ngOnInit() {
@@ -156,5 +169,141 @@ export class CreateSystemTestPage implements OnInit {
   doRefresh($event: any) {
 
 
+  }
+
+  async aiGenerate(part: string) {
+    await this.showLoading()
+
+    const forDescription = {
+      history: [
+        {
+          role: "user",
+          parts:[{text: "Hey, I need help to create a system test case description"}]
+        },
+        {
+          role: "model",
+          parts:[{text: "Sure, I can help you with that. What do you need help with?"}]
+        },
+      ],
+      generationConfig: {
+        maxOutputTokens: 100,
+      }
+    }
+
+    const forStep = {
+      history: [
+        {
+          role: "user",
+          parts:[{text: "Hey, I need help to create a system test case steps, dont give me more information about the test, JUST LIST THE STEPS"}]
+        },
+        {
+          role: "model",
+          parts:[{text: "Sure, I can help you with that."}]
+        },
+      ],
+
+      generationConfig: {
+        maxOutputTokens: 250,
+      }
+    }
+
+    if (part === 'description') {
+
+      if (!this.systemTest.title || this.systemTest.title === '') {
+        await this.hideLoading();
+        this.showAlert('Please fill out the title of the test before asking for help with the description.', 'Error').then(r =>
+          console.log('Alert shown'));
+        return;
+      }
+
+
+      let chat = this.model.startChat(forDescription as any);
+      let msg = "Given this test title:" + this.systemTest.title + "I need help to create the description of the test, just give me the test main objective";
+      console.log(msg);
+      await chat.sendMessage(msg).then(response => {
+        this.systemTest.description = response.response.text();
+      });
+
+
+    }
+
+    if (part === 'step') {
+
+      if (!this.systemTest.title || this.systemTest.title === '' || !this.systemTest.description || this.systemTest.description === '') {
+        await this.hideLoading();
+        this.showAlert('Please fill out the title and description of the test before asking for help with the steps.', 'Error').then(r =>
+          console.log('Alert shown'));
+        return;
+      }
+
+
+      let chat = this.model.startChat(forStep as any);
+      let msg = "Given this test title:" + this.systemTest.title + "and this test description:" + this.systemTest.description + ". Here is more information about the test: " + this.extraData + "I need help to create the steps of the test, just list the steps";
+      console.log(msg);
+      await chat.sendMessage(msg).then(response => {
+        this.aiSteps.push({message: response.response.text(), from: 'AI', id: '1'});
+        console.log(response.response.text());
+      })
+      this.disableAI = true;
+    }
+
+
+    await this.hideLoading();
+
+  }
+
+  async askAIForHelp(part: string) {
+    await this.aiGenerate(part).then(r => console.log('AI generated'));
+    const element  = document.getElementById('mk-1');
+    console.log(element);
+    this.chatStyle();
+  }
+
+
+  chatStyle(){
+    //obtener el elemento id mk-0
+    const element = document.getElementById('mk-1');
+
+    console.log(element);
+
+    //a los elementos h1 dentro de mk agregar font-size 20px
+    if (!element) return;
+
+    let h1 = element.getElementsByTagName("h1");
+    let h2 = element.getElementsByTagName("h2");
+    let li = element.getElementsByTagName("li");
+    //li -> strong
+    let strong = element.getElementsByTagName("strong");
+    //li -> ul -> li
+    let ul = element.getElementsByTagName("ul");
+
+    for (var i = 0; i < h1.length; i++) {
+      h1[i].style.fontSize = "2.5em";
+      h1[i].style.fontWeight = "bold";
+    }
+    for (var i = 0; i < h2.length; i++) {
+      h2[i].style.fontSize = "2em";
+      h2[i].style.fontWeight = "bold";
+    }
+
+    for (var i = 0; i < li.length; i++) {
+      li[i].style.fontSize = "1.5em";
+      // add a - before the text
+      li[i].innerHTML = "- " + li[i].innerHTML;
+      console.log(li[i].innerHTML);
+    }
+
+    for (var i = 0; i < strong.length; i++) {
+      //add a - before the text
+      console.log(strong[i].innerHTML);
+    }
+
+    for (var i = 0; i < ul.length; i++) {
+      ul[i].style.fontSize = "1em";
+      // add a - before the text
+      ul[i].innerHTML = " - " + ul[i].innerHTML;
+      console.log(ul[i].innerHTML);
+    }
+
   }
 }