opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Global Status component to handle repository loading asynchronously and enhance CSS for RAM and process status display

pull/18/head
Lucas Lara García 2025-03-25 12:13:46 +01:00
parent 04ed52754c
commit 2f47b2ec66
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ogWebconsole/src/app/components/global-status/global-status.component.ts
View File

@ -101,10 +101,15 @@ export class GlobalStatusComponent implements OnInit {
this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe( this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
data => { data => {
this.repositories = data['hydra:member']; this.repositories = data['hydra:member'];
let remainingRepositories = this.repositories.length;
this.repositories.forEach(repository => { this.repositories.forEach(repository => {
this.loadRepositoryStatus(repository.uuid); this.loadRepositoryStatus(repository.uuid, () => {
remainingRepositories--;
if (remainingRepositories === 0) {
this.loading = false;
}
});
}); });
this.loading = false;
}, },
error => { error => {
console.error('Error fetching repositories', error); console.error('Error fetching repositories', error);
@ -112,12 +117,10 @@ export class GlobalStatusComponent implements OnInit {
} }
); );
} }
loadRepositoryStatus(repositoryUuid: string): void { loadRepositoryStatus(repositoryUuid: string, callback: () => void): void {
console.log(`Fetching status for repository UUID: ${repositoryUuid}`);
this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryUuid}/status`).subscribe( this.http.get<any>(`${this.baseUrl}/image-repositories/server/${repositoryUuid}/status`).subscribe(
data => { data => {
console.log(`Data received for repository UUID: ${repositoryUuid}`, data);
const output = data.output; const output = data.output;
this.repositoryStatuses[repositoryUuid] = { this.repositoryStatuses[repositoryUuid] = {
...output, ...output,
@ -132,10 +135,11 @@ export class GlobalStatusComponent implements OnInit {
available: parseFloat(output.ram.available) available: parseFloat(output.ram.available)
} }
}; };
console.log(`Repository status updated for UUID: ${repositoryUuid}`, this.repositoryStatuses[repositoryUuid]); callback();
}, },
error => { error => {
console.error(`Error fetching status for repository ${repositoryUuid}`, error); console.error(`Error fetching status for repository ${repositoryUuid}`, error);
callback();
} }
); );
} }

21
ogWebconsole/src/app/components/global-status/status-tab/status-tab.component.css
View File

@ -9,7 +9,8 @@
flex-direction: column; flex-direction: column;
} }
.disk-usage { .disk-usage,
.ram-usage {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -17,12 +18,14 @@
justify-content: center; justify-content: center;
} }
.service-list { .service-list,
.process-list {
margin-top: 0em; margin-top: 0em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.services-status { .services-status,
.processes-status {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -33,6 +36,12 @@
align-items: center; align-items: center;
} }
.processes-status li {
margin: 5px 0;
display: flex;
align-items: center;
}
.status-led { .status-led {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -49,11 +58,13 @@
background-color: red; background-color: red;
} }
.disk-title { .disk-title,
.ram-title {
margin-bottom: 0px; margin-bottom: 0px;
} }
.service-title { .service-title,
.process-title {
margin-top: 0px; margin-top: 0px;
} }