fix: fixed docker data usage not being calculated correctly

Author: Leonardo Chaia

src/app/daemon-tools/docker-system.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { DockerService } from './docker.service';
 import { SystemInfo, SystemDfResponse } from 'dockerode';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class DockerSystemService {
@@ -14,4 +15,39 @@ export class DockerSystemService {
   public df() {
     return this.daemon.docker(d => d.df() as Promise<SystemDfResponse>);
   }
+
+  public diskUsageResume() {
+    return this.df()
+      .pipe(map(dataUsage => new DockerDiskUsageResume(dataUsage)));
+  }
+}
+
+export interface DockerDiskUsageListResume {
+  size: number;
+  count: number;
+}
+
+// https://github.com/docker/cli/blob/a900ba8aeff764a5fb5bb7e18eee25d75a220732/cli/command/formatter/disk_usage.go
+export class DockerDiskUsageResume {
+
+  public readonly images: DockerDiskUsageListResume;
+  public readonly containers: DockerDiskUsageListResume;
+  public readonly volumes: DockerDiskUsageListResume;
+
+  constructor(dataUsage: SystemDfResponse) {
+    this.images = {
+      size: dataUsage.LayersSize,
+      count: dataUsage.Images.length
+    };
+
+    this.containers = {
+      size: dataUsage.Containers.map(i => i.SizeRw || 0).reduce((p, c) => p + c, 0),
+      count: dataUsage.Containers.length,
+    };
+
+    this.volumes = {
+      size: dataUsage.Volumes.map(i => i.UsageData.Size >= 0 ? i.UsageData.Size : 0).reduce((p, c) => p + c, 0),
+      count: dataUsage.Volumes.length,
+    };
+  }
 }

src/app/daemon-tools/system-container/system-container.component.html

@@ -89,57 +89,25 @@ <h2 style="margin:0">
     <div fxLayout="row"
          fxLayoutGap="16px"
          *ngIf="dataUsage">
-      <mat-card fxLayout="row"
-                fxLayoutAlign="start center"
-                fxLayoutGap="16px">
-        <div>
-          <h1 class="mat-display-1 tim-text-primary"
-              style="margin:0; font-weight: bold;">
-            {{dataUsage.Images.length}}
-          </h1>
-        </div>
-        <div>
-          <h2 style="margin:0">Images</h2>
-          <h3 style="margin:0">
-            {{imageSize | bytesToHuman}}
-          </h3>
-        </div>
-      </mat-card>
 
       <mat-card fxLayout="row"
-                fxLayoutGap="16px">
+                fxLayoutAlign="start center"
+                fxLayoutGap="16px"
+                *ngFor="let key of ['images', 'containers', 'volumes']">
         <div>
           <h1 class="mat-display-1 tim-text-primary"
               style="margin:0; font-weight: bold;">
-            {{dataUsage.Containers.length}}
+            {{dataUsage[key].count}}
           </h1>
         </div>
-        <div fxFlexAlign="center">
-          <h2 style="margin:0">Containers</h2>
-          <h3 style="margin:0">
-            {{containerSize | bytesToHuman}}
-          </h3>
-        </div>
-      </mat-card>
-
-
-      <mat-card fxLayout="row"
-                fxLayoutGap="16px">
         <div>
-          <h1 class="mat-display-1 tim-text-primary"
-              style="margin:0; font-weight: bold;">
-            {{dataUsage.Volumes.length}}
-          </h1>
-        </div>
-        <div fxFlexAlign="center">
-          <h2 style="margin:0">Volumes</h2>
+          <h2 style="margin:0">{{key | titlecase}}</h2>
           <h3 style="margin:0">
-            {{volumeSize | bytesToHuman}}
+            {{dataUsage[key].size | bytesToHuman}}
           </h3>
         </div>
       </mat-card>
 
     </div>
   </ng-container>
-</div>
-<pre *ngIf="dataUsage">{{dataUsage|json}}</pre>
+</div>

src/app/daemon-tools/system-container/system-container.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { SystemDfResponse, SystemInfo } from 'dockerode';
-import { DockerSystemService } from '../docker-system.service';
+import { SystemInfo } from 'dockerode';
+import { DockerSystemService, DockerDiskUsageResume } from '../docker-system.service';
 import { map, take } from 'rxjs/operators';
 import { forkJoin } from 'rxjs';
 
@@ -11,15 +11,11 @@ import { forkJoin } from 'rxjs';
 })
 export class SystemContainerComponent implements OnInit {
 
-  public dataUsage: SystemDfResponse;
+  public dataUsage: DockerDiskUsageResume;
   public systemInfo: SystemInfo;
 
   public loading: boolean;
 
-  public imageSize: number;
-  public containerSize: number;
-  public volumeSize: number;
-
   constructor(private systemService: DockerSystemService) { }
 
   public ngOnInit() {
@@ -30,17 +26,9 @@ export class SystemContainerComponent implements OnInit {
           map(info => this.systemInfo = info),
           take(1)
         ),
-      this.systemService.df()
+      this.systemService.diskUsageResume()
         .pipe(
-          map(dataUsage => {
-            this.dataUsage = dataUsage;
-
-            this.imageSize = dataUsage.Images.map(i => i.Size).reduce((p, c) => p + c, 0);
-            this.imageSize -= dataUsage.Images.map(i => i.SharedSize).reduce((p, c) => p + c, 0);
-            this.containerSize = dataUsage.Containers.map(i => i.SizeRootFs).reduce((p, c) => p + c, 0);
-            this.volumeSize = dataUsage.Volumes.map(i => i.UsageData.Size).reduce((p, c) => p + c, 0);
-            return this.dataUsage;
-          }),
+          map(dataUsage => this.dataUsage = dataUsage),
           take(1)
         )
     ])