Merge pull request #118 from Antoniiosc7/105-navigation-refactor

105 navigation refactor
Antoniiosc7 · Apr 13, 2024 · ad11666 · ad11666
2 parents 3d6e7b0 + 7f65a9c
commit ad11666
Show file tree

Hide file tree

Showing 22 changed files with 235 additions and 91 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,25 @@
+name: Build Check
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -50,6 +50,7 @@ import { YamlViewComponent } from './pages/tests/yaml-view/yaml-view.component';
 import { YamlEditComponent } from './pages/tests/yaml-edit/yaml-edit.component';
 import { YamelsComponent } from './components/yamels/yamels.component';
 import {NgxPaginationModule} from "ngx-pagination";
+import { MatExpansionModule } from '@angular/material/expansion';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -107,6 +108,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     MatDialogModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,
+    MatExpansionModule,
     NgxPaginationModule,
     TranslateModule.forRoot({
       defaultLanguage: 'en',

diff --git a/src/app/components/dialogs/script-info/script-info.component.ts b/src/app/components/dialogs/script-info/script-info.component.ts
@@ -21,7 +21,6 @@ export class ScriptInfoComponent implements OnInit {
   copyContent(id: string) {
     const text = document.getElementById(id) as HTMLTextAreaElement;
     navigator.clipboard.writeText(text.value).then(() => {
-      console.log('Copying to clipboard was successful!');
       this.close();
     }, err => {
       console.error('Could not copy text: ', err);

diff --git a/src/app/components/yamels/yamels.component.css b/src/app/components/yamels/yamels.component.css
@@ -36,6 +36,6 @@
 }
 
 .btn.btn-light{
-  background-color: #c51f1f;
+  background-color: #b14040;
   color: white;
 }
diff --git a/src/app/components/yamels/yamels.component.html b/src/app/components/yamels/yamels.component.html
@@ -1,8 +1,7 @@
 <div class="search-container">
   <input type="text" placeholder="Search metric..." [(ngModel)]="searchTerm">
   <button class="btn btn-primary" (click)="searchMetric()">Search</button>
-  <button class="btn btn-light" (click)="clearSearch()"><i class="fas fa-trash"></i></button>
-</div>
+  <button class="btn btn-light" (click)="clearSearch()"><i class="fas fa-times"></i></button></div>
 <div *ngFor="let section of filteredSections | paginate: { itemsPerPage: 5, currentPage: p }">
   <section>
     <h4> {{section.title}} </h4>

diff --git a/src/app/pages/config/config.component.ts b/src/app/pages/config/config.component.ts
@@ -52,7 +52,6 @@ export class ConfigComponent implements OnInit {
           const portData = ports[internalPort];
           if (portData && portData[0]) {
             const hostPort = portData[0].HostPort;
-            console.log(hostPort);
             return {
               Id: container.Id,
               Name: container.Name.slice(1),

diff --git a/src/app/pages/gh-simulator/clone/clone.component.ts b/src/app/pages/gh-simulator/clone/clone.component.ts
@@ -50,8 +50,6 @@ export class CloneComponent implements OnInit {
             this.githubService.listBranchesForRepo(repo.owner.login, repo.name).pipe(
               catchError(error => {
                 if (error.status === 429) {
-                  console.log('Rate limit exceeded. Retrying in 1 minute...');
-                  console.log('Error:', error.message);
                   this.error2 = true;
                   return timer(60000).pipe(
                     switchMap(() => this.githubService.listBranchesForRepo(repo.owner.login, repo.name))

diff --git a/src/app/pages/gh-simulator/clone/repository/repository.component.ts b/src/app/pages/gh-simulator/clone/repository/repository.component.ts
@@ -56,7 +56,6 @@ export class RepositoryComponent implements OnInit {
       this.glassmatrixService.cloneRepo(this.owner, this.repoName)
         .subscribe(
           () => {
-            console.log('Repository cloned successfully');
             this.router.navigate(['/gh-simulator/local']);
           },
           error => console.error('Error cloning repository', error)

diff --git a/src/app/pages/gh-simulator/local/actions/actions.component.ts b/src/app/pages/gh-simulator/local/actions/actions.component.ts
@@ -99,7 +99,6 @@ export class ActionsComponent {
   pushChanges() {
     this.glassmatrixService.pushChanges(this.repoName!).subscribe(
       res => {
-        console.log('Changes pushed successfully');
       },
       err => {
         console.error('Error pushing changes:', err);
@@ -109,7 +108,6 @@ export class ActionsComponent {
   createCommit() {
     this.glassmatrixService.createCommit(this.repoName!, this.fileContent, this.commitMessage).subscribe(
       res => {
-        console.log('Commit created');
         this.getFiles();
       },
       err => {
@@ -139,7 +137,6 @@ export class ActionsComponent {
     if (this.owner && this.repoName) {
       this.githubService.createIssue(this.token, this.owner, this.repoName, {title, body}).subscribe(
         issue => {
-          console.log('Issue created:', issue);
           this.getIssues(); // Actualizar la lista de issues
         },
         error => {

diff --git a/src/app/pages/gh-simulator/local/local.component.ts b/src/app/pages/gh-simulator/local/local.component.ts
@@ -24,7 +24,6 @@ export class LocalComponent implements OnInit {
   getRepos(): void {
     this.glassmatrixService.listRepos().subscribe(data => {
       this.repositories = data.repositories;
-      console.log(this.repositories);
     });
   }
 

diff --git a/src/app/pages/metrics-loader/executor/executor.component.ts b/src/app/pages/metrics-loader/executor/executor.component.ts
@@ -95,7 +95,6 @@ export class ExecutorComponent implements OnInit {
       window.scrollTo({ top: scrollPosition });
     });
     dialogRef.afterClosed().subscribe(result => {
-      console.log(`Guía añadida: ${result}`);
     });
   }
   postContent(): void {
@@ -227,6 +226,28 @@ export class ExecutorComponent implements OnInit {
     this.window.from = startOfHour.toISOString();
     this.window.initial = startOfHour.toISOString();
     this.window.end = endOfHour.toISOString();
+
+    const data = JSON.parse(this.data);
+    if (data.metric.window) {
+      data.metric.window.type = this.window.type;
+      data.metric.window.period = this.window.period;
+      data.metric.window.initial = this.window.initial;
+      data.metric.window.from = this.window.from;
+      data.metric.window.end = this.window.end;
+      data.metric.window.timeZone = this.window.timeZone;
+    }
+      this.glassmatrixService.updateFile(this.fileName, data).subscribe(
+      () => {
+        this.message = 'File saved successfully';
+        this.messageClass = 'success';
+      },
+      (error) => {
+        this.message = 'An error occurred: ' + error;
+        this.messageClass = 'error';
+      }
+    );
+    // Recargar la página
+    location.reload();
   }
 
   goBack(): void {

diff --git a/src/app/pages/metrics-loader/tpa-executor/tpa-executor.component.ts b/src/app/pages/metrics-loader/tpa-executor/tpa-executor.component.ts
@@ -230,6 +230,28 @@ export class TpaExecutorComponent implements OnInit {
     this.window.from = startOfHour.toISOString();
     this.window.initial = startOfHour.toISOString();
     this.window.end = endOfHour.toISOString();
+
+    const data = JSON.parse(this.data);
+    if (data.metric.window) {
+      data.metric.window.type = this.window.type;
+      data.metric.window.period = this.window.period;
+      data.metric.window.initial = this.window.initial;
+      data.metric.window.from = this.window.from;
+      data.metric.window.end = this.window.end;
+      data.metric.window.timeZone = this.window.timeZone;
+    }
+    this.glassmatrixService.updateTPAFile(this.tpa, this.fileName, data).subscribe(
+      () => {
+        this.message = 'File saved successfully';
+        this.messageClass = 'success';
+      },
+      (error) => {
+        this.message = 'An error occurred: ' + error;
+        this.messageClass = 'error';
+      }
+    );
+    // Recargar la página
+    location.reload();
   }
 
   goBack(): void {

diff --git a/src/app/pages/tests/tests.component.css b/src/app/pages/tests/tests.component.css
@@ -25,14 +25,37 @@ body {
   cursor: pointer;
   padding: 0 10px;
 }
-
+.loading-overlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(128, 128, 128, 0.5);
+  z-index: 9999;
+}
+.loader {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
 textarea {
   width: 100%;
   height: 600px;
   resize: none;
 }
 
-
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 .textarea-container textarea {
   flex-grow: 1;
   margin-bottom: 10px;

diff --git a/src/app/pages/tests/tests.component.html b/src/app/pages/tests/tests.component.html
@@ -1,3 +1,7 @@
+<div class="loading-overlay" *ngIf="isLoading">
+  <div class="loader"></div>
+  <p class="loading-text">{{ 'METRICS_TESTER.COLLECTING_RESOURCES' | translate }}</p>
+</div>
 <body>
   <div class="container">
     <h3> {{ 'TESTS.title' | translate }}</h3>

diff --git a/src/app/pages/tests/tests.component.ts b/src/app/pages/tests/tests.component.ts
@@ -29,6 +29,7 @@ interface YamlData {
 export class TestsComponent implements OnInit {
   yamlContent!: string;
   yamlFiles: string[] = [];
+  isLoading = false;
   fileName!: string;
   response!: any;
   tpa!: string;
@@ -114,8 +115,9 @@ export class TestsComponent implements OnInit {
         // Obtener la clave a buscar y el valor mínimo esperado
         const key = step.with['key'];
         const minExpectedValue = Number(step.with['minExpectedValue']);
-
+        this.isLoading = true;
         // Hacer una solicitud GET al endpoint '/getData/:key'
+        new Promise((resolve) => setTimeout(resolve, 10000)).then(() => {
         return this.http.get<any>(`http://localhost:6012/glassmatrix/api/v1/getData/${key}`, {}).toPromise().then((data: any) => {
           // Comprueba si el campo especificado existe en los datos devueltos
           if (data && data[0] && data[0][key]) {
@@ -124,15 +126,19 @@ export class TestsComponent implements OnInit {
             if (value >= minExpectedValue) {
               // Si es así, empuja un mensaje indicando que el test ha sido superado a this.testStatuses
               this.testStatuses.push({ text: `Test successfully completed. ${key}=${value}`, success: true });
+              this.isLoading = false;
             } else {
               // Si no es así, empuja un mensaje indicando que el test no ha sido superado a this.testStatuses
               this.testStatuses.push({ text: `Test failed. ${key}=${value}`, success: false });
+              this.isLoading = false;
             }
           } else {
             // Si no existe, empuja un mensaje indicando que no hay coincidencias a this.testStatuses
             this.testStatuses.push({ text: `No records found for the field '${key}' in the database`, success: false });
+            this.isLoading = false;
           }
         });
+      });
       },
       'bluejay/compute/tpa': (step: { with: { [x: string]: string; }; }) => {
         // Leer el contenido del archivo
@@ -144,7 +150,6 @@ export class TestsComponent implements OnInit {
             // Esperar 10 segundos y luego llamar a getComputation
             setTimeout(() => {
               this.getComputation();
-              console.log(this.computationUrl)
             }, 1000);
           });
         });
@@ -158,7 +163,6 @@ export class TestsComponent implements OnInit {
             // Esperar 10 segundos y luego llamar a getComputation
             setTimeout(() => {
               this.getComputation();
-              console.log(this.computationUrl)
             }, 1000);
           });
         });
@@ -208,6 +212,7 @@ export class TestsComponent implements OnInit {
           });
         } else {
           console.error(`No handler found for method ${step.method} and uses ${step.uses}`);
+          return Promise.reject(`No handler found for method ${step.method} and uses ${step.uses}`);
         }
       });
     }, Promise.resolve()).catch(error => {
@@ -217,8 +222,8 @@ export class TestsComponent implements OnInit {
   }, error => {
     console.error(error);
     this.errorMessage = 'Se produjo un error durante la ejecución: ' + error.message;
-  });
-}
+    });
+  }
   setDefaultFormat(): void {
     this.yamlContent = `steps:
   - uses: "github/#"
@@ -286,7 +291,13 @@ export class TestsComponent implements OnInit {
       tap(data => {
         this.data = JSON.stringify(data, null, 2);
         const parsedData = JSON.parse(this.data);
-        console.log(parsedData); // Aquí está el console.log
+        const now = new Date();
+        const startOfHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours());
+        const endOfHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, -1);
+
+        this.window.from = startOfHour.toISOString();
+        this.window.initial = startOfHour.toISOString();
+        this.window.end = endOfHour.toISOString();
         if (parsedData && parsedData.metric) {
           if (parsedData.metric.scope) {
             this.scope.project = parsedData.metric.scope.project || '';
@@ -296,9 +307,6 @@ export class TestsComponent implements OnInit {
           if(parsedData.metric.window) {
             this.window.type = parsedData.metric.window.type || '';
             this.window.period = parsedData.metric.window.period || '';
-            this.window.initial = parsedData.metric.window.initial || '';
-            this.window.from = parsedData.metric.window.from || '';
-            this.window.end = parsedData.metric.window.end || '';
             this.window.timeZone = parsedData.metric.window.timeZone || '';
           }
         } else {
@@ -313,7 +321,13 @@ export class TestsComponent implements OnInit {
       tap(data => {
         this.data = JSON.stringify(data, null, 2);
         const parsedData = JSON.parse(this.data);
-        console.log(parsedData); // Aquí está el console.log
+        const now = new Date();
+        const startOfHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours());
+        const endOfHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, -1);
+
+        this.window.from = startOfHour.toISOString();
+        this.window.initial = startOfHour.toISOString();
+        this.window.end = endOfHour.toISOString();
         if (parsedData && parsedData.metric) {
           if (parsedData.metric.scope) {
             this.scope.project = parsedData.metric.scope.project || '';
@@ -323,9 +337,6 @@ export class TestsComponent implements OnInit {
           if(parsedData.metric.window) {
             this.window.type = parsedData.metric.window.type || '';
             this.window.period = parsedData.metric.window.period || '';
-            this.window.initial = parsedData.metric.window.initial || '';
-            this.window.from = parsedData.metric.window.from || '';
-            this.window.end = parsedData.metric.window.end || '';
             this.window.timeZone = parsedData.metric.window.timeZone || '';
           }
         } else {