feat: adds registry image history view

Author: Leonardo Chaia

src/app/app-tabs.module.ts

@@ -30,6 +30,8 @@ import {
 } from './application-templates/application-edit-list-container/application-edit-list-container.component';
 import { ContainerLogsContainerComponent } from './daemon-tools/container-logs-container/container-logs-container.component';
 import { DockerHubRepoListContainerComponent } from './docker-hub/docker-hub-repo-list-container/docker-hub-repo-list-container.component';
+import { ImagePreviewContainerComponent } from './docker-image-preview/image-preview-container/image-preview-container.component';
+import { DockerImagePreviewModule } from './docker-image-preview/docker-image-preview.module';
 
 const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
   {
@@ -101,6 +103,10 @@ const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
     id: TimoneerTabs.DOCKERHUB_IMAGES,
     component: DockerHubRepoListContainerComponent,
   },
+  {
+    id: TimoneerTabs.IMAGE_PREVIEW,
+    component: ImagePreviewContainerComponent,
+  },
   {
     id: TimoneerTabs.DASHBOARD,
     title: 'Dashboard',
@@ -120,6 +126,7 @@ const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
     ApplicationTemplatesModule,
     RegistryModule,
     SettingsModule,
+    DockerImagePreviewModule,
     TabsModule.forRoot(TIMONEER_AVAILABLE_TABS),
   ],
 })

src/app/docker-image-preview/docker-image-preview.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ImagePreviewContainerComponent } from './image-preview-container/image-preview-container.component';
+import { RegistryModule } from '../registry/registry.module';
+import { MatCardModule, MatIconModule } from '@angular/material';
+import { ImageHistoryComponent } from './image-history/image-history.component';
+import { NgObjectPipesModule } from 'angular-pipes';
+import { ManifestMetadataComponent } from './manifest-metadata/manifest-metadata.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RegistryModule,
+    NgObjectPipesModule,
+    MatCardModule,
+    MatIconModule,
+  ],
+  declarations: [
+    ImagePreviewContainerComponent,
+    ImageHistoryComponent,
+    ManifestMetadataComponent,
+  ]
+})
+export class DockerImagePreviewModule { }

src/app/docker-image-preview/image-history/image-history.component.html

@@ -0,0 +1,13 @@
+<mat-card *ngFor="let row of history"
+          style="position:relative">
+  <code *ngFor="let cmd of row.container_config.Cmd">
+    {{getCommand(cmd)}}
+  </code>
+
+  <div style="position: absolute; bottom: 2px; right: 4px;">
+    <small>
+      {{row.os}} {{row.architecture}}
+      {{row.created|date:'short'}}
+    </small>
+  </div>
+</mat-card>

src/app/docker-image-preview/image-history/image-history.component.scss

@@ -0,0 +1,3 @@
+mat-card {
+  margin-bottom: 16px;
+}

src/app/docker-image-preview/image-history/image-history.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ImageManifest, ImageLayerHistoryV1Compatibility } from '../../registry/registry.model';
+
+@Component({
+  selector: 'tim-image-history',
+  templateUrl: './image-history.component.html',
+  styleUrls: ['./image-history.component.scss']
+})
+export class ImageHistoryComponent implements OnInit {
+
+  @Input()
+  public manifest: ImageManifest;
+
+  public history: ImageLayerHistoryV1Compatibility[];
+
+  constructor() { }
+
+  public ngOnInit() {
+    this.history = this.manifest.history.map(h => JSON.parse(h.v1Compatibility) as ImageLayerHistoryV1Compatibility);
+  }
+
+  public getCommand(cmd: string) {
+    const nop = '#(nop)';
+    const index = cmd.indexOf(nop);
+    if (index >= 0) {
+      return cmd.slice(index + nop.length);
+    } else {
+      return cmd;
+    }
+  }
+
+}

src/app/docker-image-preview/image-preview-container/image-preview-container.component.html

@@ -0,0 +1,13 @@
+<div fxLayout="column"
+     style="padding:16px;">
+
+  <div *ngIf="manifest">
+    <tim-manifest-metadata [manifest]="manifest"></tim-manifest-metadata>
+
+    <h2 style="text-align: center">
+      History
+    </h2>
+
+    <tim-image-history [manifest]="manifest"></tim-image-history>
+  </div>
+</div>

src/app/docker-image-preview/image-preview-container/image-preview-container.component.scss

@@ -0,0 +1,31 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { RegistryService } from '../../registry/registry.service';
+import { TAB_DATA } from '../../tabs/tab.model';
+import { ImageManifest } from '../../registry/registry.model';
+
+export interface ImagePreviewContainerComponentData {
+  image: string;
+  tag: string;
+  registry: string;
+}
+
+@Component({
+  selector: 'tim-image-preview-container',
+  templateUrl: './image-preview-container.component.html',
+  styleUrls: ['./image-preview-container.component.scss']
+})
+export class ImagePreviewContainerComponent implements OnInit {
+  public manifest: ImageManifest;
+
+  constructor(
+    @Inject(TAB_DATA)
+    private tabData: ImagePreviewContainerComponentData,
+    private registry: RegistryService) { }
+
+  public ngOnInit() {
+    this.registry.getImageManifest(this.tabData.registry, this.tabData.image, this.tabData.tag)
+      .subscribe(manifest => {
+        this.manifest = manifest;
+      });
+  }
+}

src/app/docker-image-preview/image-preview-container/image-preview-container.component.ts

@@ -0,0 +1,37 @@
+<mat-card>
+  <h2>
+    <mat-icon class="tim-text-primary">iso</mat-icon>
+    {{manifest.name}}:{{manifest.tag}}
+  </h2>
+  <p *ngIf="history[0].author">
+    Author: {{history[0].author}}
+  </p>
+  <p *ngIf="history[0].created">
+    Created: {{history[0].created | date:'short'}}
+  </p>
+  <p *ngIf="history[0].os">
+    OS: {{history[0].os}} {{history[0].architecture}}
+  </p>
+  <p *ngIf="history[0].docker_version">
+    Built with Docker v{{history[0].docker_version}}
+  </p>
+</mat-card>
+
+<mat-card *ngIf="baseConfig.Labels && (baseConfig.Labels|keys).length">
+  <h3>
+    <mat-icon class="tim-text-primary">label</mat-icon>
+    Labels
+  </h3>
+  <div *ngFor="let label of baseConfig.Labels | keyvalue">
+    <b>{{label.key | titlecase}}</b>
+    {{label.value}}
+  </div>
+</mat-card>
+
+<mat-card *ngIf="baseConfig.Env && baseConfig.Env.length">
+  <h3>
+    <mat-icon class="tim-text-primary">confirmation_number</mat-icon>
+    Environment Variables
+  </h3>
+  <pre><ng-container *ngFor="let env of baseConfig.Env">{{env+"\n"}}</ng-container></pre>
+</mat-card>

src/app/docker-image-preview/manifest-metadata/manifest-metadata.component.html

@@ -0,0 +1,4 @@
+mat-card {
+    margin-bottom: 16px;
+  }
+  

src/app/docker-image-preview/manifest-metadata/manifest-metadata.component.scss

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ImageManifest, ImageLayerHistoryV1Compatibility, ImageHistoryContainerConfig } from '../../registry/registry.model';
+
+@Component({
+  selector: 'tim-manifest-metadata',
+  templateUrl: './manifest-metadata.component.html',
+  styleUrls: ['./manifest-metadata.component.scss']
+})
+export class ManifestMetadataComponent implements OnInit {
+
+  @Input()
+  public manifest: ImageManifest;
+  public history: ImageLayerHistoryV1Compatibility[];
+  public baseConfig: ImageHistoryContainerConfig;
+
+  constructor() { }
+
+  public ngOnInit() {
+    this.history = this.manifest.history.map(h => JSON.parse(h.v1Compatibility) as ImageLayerHistoryV1Compatibility);
+    this.baseConfig = this.history[0].container_config;
+  }
+
+}

src/app/docker-image-preview/manifest-metadata/manifest-metadata.component.ts

@@ -25,7 +25,7 @@ export class RegistryAuthService {
     password: string) {
 
     const authHeader = btoa(`${username}:${password}`);
-    return this.httpClient.post<{ token: string }>(url, null, {
+    return this.httpClient.get<{ token: string }>(url, {
       params: {
         service: service,
         scope: scope,

src/app/registry/registry-auth.service.ts

@@ -25,6 +25,13 @@ <h2>
       </h2>
     </div>
 
+
+    <div>
+      <a mat-raised-button
+         (click)="imagePreview(repo)">
+        +info
+      </a>
+    </div>
     <div>
       <a mat-raised-button
          color="primary"

src/app/registry/registry-list/registry-list.component.html

@@ -5,6 +5,7 @@ import { SettingsService } from '../../settings/settings.service';
 import { map } from 'rxjs/operators';
 import { TabService } from '../../tabs/tab.service';
 import { TimoneerTabs } from '../../timoneer-tabs';
+import { ImagePreviewContainerComponentData } from '../../docker-image-preview/image-preview-container/image-preview-container.component';
 
 @Component({
   selector: 'tim-registry-list',
@@ -58,4 +59,15 @@ export class RegistryListComponent implements OnInit {
       });
   }
 
+  public imagePreview(repo: string) {
+    this.tabService.add(TimoneerTabs.IMAGE_PREVIEW, {
+      title: repo,
+      params: {
+        image: repo,
+        registry: this.registryUrl,
+        tag: 'latest'
+      } as ImagePreviewContainerComponentData
+    });
+  }
+
 }

src/app/registry/registry-list/registry-list.component.ts

@@ -0,0 +1,73 @@
+
+export interface FsLayer {
+    blobSum: string;
+}
+
+export interface ImageLayerHistory {
+    v1Compatibility: string;
+}
+
+export interface Jwk {
+    crv: string;
+    kid: string;
+    kty: string;
+    x: string;
+    y: string;
+}
+
+export interface SignatureHeader {
+    jwk: Jwk;
+    alg: string;
+}
+
+export interface Signature {
+    header: SignatureHeader;
+    signature: string;
+    protected: string;
+}
+
+export interface ImageManifest {
+    schemaVersion: number;
+    name: string;
+    tag: string;
+    architecture: string;
+    fsLayers: FsLayer[];
+    history: ImageLayerHistory[];
+    signatures: Signature[];
+}
+
+export interface ImageHistoryContainerConfig {
+    Hostname: string;
+    Domainname: string;
+    User: string;
+    AttachStdin: boolean;
+    AttachStdout: boolean;
+    AttachStderr: boolean;
+    ExposedPorts: { [key: string]: any };
+    Tty: boolean;
+    OpenStdin: boolean;
+    StdinOnce: boolean;
+    Env: string[];
+    Cmd: string[];
+    ArgsEscaped: boolean;
+    Image: string;
+    Volumes?: any;
+    WorkingDir: string;
+    Entrypoint: string[];
+    OnBuild: any[];
+    Labels: { [key: string]: string };
+}
+
+export interface ImageLayerHistoryV1Compatibility {
+    architecture: string;
+    config: ImageHistoryContainerConfig;
+    container: string;
+    container_config: ImageHistoryContainerConfig;
+    created: string;
+    docker_version: string;
+    id: string;
+    os: string;
+    parent: string;
+    throwaway?: boolean;
+    author: string;
+}

src/app/registry/registry.model.ts

@@ -5,6 +5,7 @@ import { throwError, Observable, forkJoin, of } from 'rxjs';
 import { SettingsService } from '../settings/settings.service';
 import { DockerRegistrySettings } from '../settings/settings.model';
 import { RegistryAuthService } from './registry-auth.service';
+import { ImageManifest } from './registry.model';
 
 @Injectable({
   providedIn: 'root'
@@ -27,7 +28,7 @@ export class RegistryService {
   }
 
   public getImageManifest(registryUrl: string, name: string, reference: string) {
-    return this.get(registryUrl, `v2/${name}/manifests/${reference}`);
+    return this.get<ImageManifest>(registryUrl, `v2/${name}/manifests/${reference}`);
   }
 
   public getRepositoriesFromAllRegistries() {

src/app/registry/registry.service.ts

@@ -36,7 +36,7 @@ export class SettingsService {
       } else {
         this.settingsSubject.next(<ApplicationSettings>{
           registries: [{
-            url: 'https://docker.io/',
+            url: 'https://index.docker.io/',
             allowsCatalog: false,
             editable: false,
           }],
@@ -68,6 +68,8 @@ export class SettingsService {
           for (const registry of settings.registries) {
             if (registry.url) {
               registry.url = this.ensureEndingSlash(registry.url);
+            } else {
+              registry.url = 'https://index.docker.io/';
             }
           }
         }

src/app/settings/settings.service.ts

@@ -15,5 +15,6 @@ export class TimoneerTabs {
     public static APPLICATION_LAUNCH = 'application-launch';
     public static REGISTRY_IMAGES = 'registry-images';
     public static DOCKERHUB_IMAGES = 'dockerhub-images';
+    public static IMAGE_PREVIEW = 'image-preview';
     public static SETTINGS = 'settings';
 }