🔥 implementation of getting containers in real-time, edit image name to id

Author: AbduazizZiyodov

src/client/src/app/components/modal/run-container-modal/run-container-modal.component.ts

@@ -54,7 +54,7 @@ export class RunContainerModalComponent implements OnInit {
     containerData['ports'] = {};
     containerData['environment'] = {};
 
-    containerData['image'] = this.data.resource?.name;
+    containerData['image'] = this.data.resource?.short_id;
 
     if (firstPort && secondPort) {
       containerData['ports'][firstPort] = secondPort;

src/client/src/app/core/containers/containers.component.html

@@ -3,11 +3,12 @@ <h2 class="h2-responsive text-center fw-bold navbar-text">
     <i class="fas fa-cubes"></i> Containers
   </h2>
 
-  <div class="card">
+  <div class="card" data-aos="zoom-in" data-aos-duration="500">
     <div class="card-body">
       <p
         data-aos="zoom-in"
         data-aos-duration="500"
+        data-aos-once="true"
         *ngIf="containers.length == 0"
         class="note border note-primary text-center"
       >
@@ -27,11 +28,7 @@ <h2 class="h2-responsive text-center fw-bold navbar-text">
             <th><i class="fas fa-compact-disc"></i> Actions</th>
           </tr>
         </thead>
-        <tbody
-          *ngFor="for; let container; of: containers; index as i"
-          data-aos="zoom-in"
-          data-aos-duration="500"
-        >
+        <tbody *ngFor="for; let container; of: containers; index as i">
           <tr>
             <td>{{ i + 1 }}.</td>
             <td>

src/client/src/app/core/containers/containers.component.ts

@@ -4,18 +4,22 @@ import { Component, OnInit } from '@angular/core';
 import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
 
 import { Status } from '@models/status';
-import { ModalData } from '@models/modal';
 import { Container } from '@models/container';
 import { ContainerService } from '@services/container.service';
 import { ModalComponent } from '@components/modal/modal.component';
 
+import { Subscription, timer } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
 @Component({
   selector: 'app-containers',
   templateUrl: './containers.component.html',
   styleUrls: ['./containers.component.scss'],
 })
 export class ContainersComponent implements OnInit {
   containers!: Container[];
+  timerSubscription!: Subscription;
+  subscription!: Subscription;
   modalRef: MdbModalRef<ModalComponent> | null = null;
 
   status: Status = {
@@ -36,9 +40,15 @@ export class ContainersComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.containerService.getContainers().subscribe((data: Container[]) => {
-      this.containers = data.reverse();
-    });
+    this.subscription = timer(0, 1000)
+      .pipe(switchMap(() => this.containerService.getContainers()))
+      .subscribe((data: Container[]) => {
+        this.containers = data.reverse();
+      });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
   }
 
   startContainer(container_id: string) {