Merge pull request #19 from AbduazizZiyodov/improve-websockets

WebSockets improvement

Makefile

@@ -0,0 +1,8 @@
+run:
+	@cd src/ && uvicorn server.asgi:application --reload --port 2121 && cd ..
+
+test:
+	@cd src/ && pytest -s server/
+
+testws:
+	@cd src/ && pytest -s server/tests/test_websockets.py

src/client/package.json

@@ -7,7 +7,7 @@
     "url": "http://github.com/AbduazizZiyodov"
   },
   "license": "MIT",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "main.js",
   "productName": "Docker Dashboard",
   "keywords": [

src/client/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "docker-dashboard"
-version = "0.1.0"
+version = "2.3.0"
 description = "Simple lightweight GUI application for working with Docker"
 authors = ["[email protected]"]
 license = ""

src/client/src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "docker-dashboard",
-    "version": "2.2.0"
+    "version": "2.3.0"
   },
   "tauri": {
     "allowlist": {

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

@@ -67,9 +67,6 @@ export class RunContainerModalComponent implements OnInit {
     for (let key of ['env', 'firstPort', 'secondPort']) {
       delete containerData[key];
     }
-
-    console.log(containerData);
-
     return containerData;
   }
 

src/client/src/app/core/image/pull-image/pull-image.component.ts

@@ -1,5 +1,5 @@
-import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { environment } from '@env';
 import { Image } from '@models/image';
@@ -25,13 +25,11 @@ export class PullImageComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    let limit: number = 1;
-    this.imageService
-      .searchImages(this.repository, limit)
-      .subscribe((image: Image[]) => {
-        this.imageInfo = image ? image[0] : null;
-      });
+    this.performSearch();
+    this.fetchImages();
+  }
 
+  fetchImages(): void {
     this.imageService.getImages().subscribe((images: Image[]) => {
       this.pulledVersions = images.filter(
         (image: Image) => image.name == this.repository
@@ -40,11 +38,20 @@ export class PullImageComponent implements OnInit {
     });
   }
 
+  performSearch(): void {
+    let limit: number = 1;
+    this.imageService
+      .searchImages(this.repository, limit)
+      .subscribe((image: Image[]) => {
+        this.imageInfo = image ? image[0] : null;
+      });
+  }
+
   addImageToTasks(): void {
     this.ws.next({
       repository: this.repository,
       tag: this.selectedTag,
-      action: 'create',
+      action: 'add',
     });
 
     this.ws.asObservable().subscribe((data: any) => {

src/client/src/app/core/image/pull-list/pull-list.component.html

@@ -18,48 +18,47 @@ <h2 class="text-center">
           >Multiple images </label
         ><br />
         Total:
-        <span class="text-success fw-bold">{{ tasks.length }}</span> tasks
+        <span class="text-success fw-bold">{{ numberOfTasks() }}</span> tasks
       </div>
 
       <blockquote
-        *ngIf="tasks.length == 0"
+        *ngIf="numberOfTasks() == 0"
         class="note w-75 m-auto text-center note-primary border mb-3"
       >
         No pending tasks yet ..
       </blockquote>
 
       <ul class="list-group list-group-light">
-        <li class="list-group-item m-auto" *ngFor="let task of tasks">
+        <li class="list-group-item m-auto" *ngFor="let key of getTaskKeys()">
           <p>
-            <span class="fw-bold">{{ task.repository }}</span>
-
+            <span class="fw-bold">{{ tasks[key].repository }}</span>
             <span
               class="mx-1 p-2 badge dodger-blue-bg rounded-pill text-lowercase"
             >
-              {{ task.tag }}</span
+              {{ tasks[key].tag }}</span
             >
-
             <button
               class="btn btn-sm btn-rounded btn-success text-capitalize"
-              (click)="start(task.repository, task.tag)"
+              (click)="start(tasks[key].repository, tasks[key].tag)"
               mdbTooltip="Click for start || continue pulling"
+              [disabled]="this.tasks[key].stream_data.length"
             >
               <i class="fas fa-play"></i>
             </button>
 
             <button
               class="btn btn-sm btn-rounded btn-danger text-capitalize mx-2"
-              (click)="delete(task.repository, task.tag)"
-              [disabled]="task.stream_data.length != 0"
+              (click)="delete(tasks[key].repository, tasks[key].tag)"
+              [disabled]="tasks[key].stream_data.length != 0"
             >
               <i class="fas fa-trash"></i>
             </button>
 
             <button
               class="btn btn-sm btn-light text-capitalize btn-rounded"
-              *ngIf="task.status"
+              *ngIf="tasks[key].status"
             >
-              {{ task.status }}
+              {{ tasks[key].status }}
             </button>
           </p>
           <div class="text-left">
@@ -68,7 +67,7 @@ <h2 class="text-center">
               cols="110"
               rows="2"
               disabled
-              [(ngModel)]="task.stream_data"
+              [(ngModel)]="tasks[key].stream_data"
               [scrollTop]="textarea.scrollHeight"
             >
             </textarea>