From 99c3c189aa9c2c8a641e7f1157740a380b263e21 Mon Sep 17 00:00:00 2001
From: Abduaziz <abduaziz.ziyodov@mail.ru>
Date: Thu, 14 Jul 2022 14:31:43 +0500
Subject: [PATCH] :fire: implementation of getting containers in real-time,
 edit image name to id

---
 .../run-container-modal.component.ts           |  2 +-
 .../core/containers/containers.component.html  |  9 +++------
 .../core/containers/containers.component.ts    | 18 ++++++++++++++----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/client/src/app/components/modal/run-container-modal/run-container-modal.component.ts b/src/client/src/app/components/modal/run-container-modal/run-container-modal.component.ts
index 38aa6e9..ac2ccbc 100644
--- a/src/client/src/app/components/modal/run-container-modal/run-container-modal.component.ts
+++ b/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;
diff --git a/src/client/src/app/core/containers/containers.component.html b/src/client/src/app/core/containers/containers.component.html
index c032d6d..1a45bcd 100644
--- a/src/client/src/app/core/containers/containers.component.html
+++ b/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>
diff --git a/src/client/src/app/core/containers/containers.component.ts b/src/client/src/app/core/containers/containers.component.ts
index 92e6c42..2777952 100644
--- a/src/client/src/app/core/containers/containers.component.ts
+++ b/src/client/src/app/core/containers/containers.component.ts
@@ -4,11 +4,13 @@ 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',
@@ -16,6 +18,8 @@ import { ModalComponent } from '@components/modal/modal.component';
 })
 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) {