From 58b8183503d355b07cf06a23d3c165a057860424 Mon Sep 17 00:00:00 2001
From: AllForNothing <sshijun@vmware.com>
Date: Thu, 30 Jul 2020 16:38:45 +0800
Subject: [PATCH] Add pull command by tag for artifact detail page

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../artifact-tag/artifact-tag.component.html  |  8 ++++++--
 .../artifact-tag/artifact-tag.component.ts    | 19 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.html b/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.html
index 0a4736965..5375051a2 100644
--- a/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.html
+++ b/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.html
@@ -1,6 +1,6 @@
 <h4>{{'REPOSITORY.TAGS' | translate}}</h4>
 
-<clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="getCurrentArtifactTags($event)"  [(clrDgSelected)]="selectedRow" [clrDgRowSelection]="true">
+<clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="getCurrentArtifactTags($event)"  [(clrDgSelected)]="selectedRow">
     <clr-dg-action-bar>
         <button id="new-tag" type="button" [disabled]="!hasCreateTagPermission" class="btn btn-secondary" (click)="addTag()">
             <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'TAG.ADD_TAG' | translate}}
@@ -41,6 +41,7 @@
         </form>
     </clr-dg-action-bar>
     <clr-dg-column [clrDgField]="'name'">{{'TAG.NAME' | translate}}</clr-dg-column>
+    <clr-dg-column *ngIf="hasPullCommand()">{{'REPOSITORY.PULL_COMMAND' | translate}}</clr-dg-column>
     <clr-dg-column *ngIf="withNotary">{{'REPOSITORY.SIGNED' | translate}}</clr-dg-column>
     <clr-dg-column>{{'TAG.PULL_TIME' | translate}}</clr-dg-column>
     <clr-dg-column>{{'TAG.PUSH_TIME' | translate}}</clr-dg-column>
@@ -52,6 +53,9 @@
                 <span *ngIf="tag.immutable" class="label label-info ml-8">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
             </div>
         </clr-dg-cell>
+        <clr-dg-cell>
+            <hbr-copy-input [title]="getPullCommand(tag)"  *ngIf="getPullCommand(tag)"  [iconMode]="true" [defaultValue]="getPullCommand(tag)"></hbr-copy-input>
+        </clr-dg-cell>
         <clr-dg-cell  *ngIf="withNotary" [ngSwitch]="tag.signed">
             <div class="cell">
                 <clr-icon shape="check-circle" *ngSwitchCase="true" size="20" class="color-green"></clr-icon>
@@ -74,4 +78,4 @@
 </clr-datagrid>
 
 <confirmation-dialog class="hidden-tag" #confirmationDialog (confirmAction)="confirmDeletion($event)">
-</confirmation-dialog>
\ No newline at end of file
+</confirmation-dialog>
diff --git a/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.ts b/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.ts
index de2d0efb1..db8d9269d 100644
--- a/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.ts
+++ b/src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.ts
@@ -14,7 +14,7 @@ import { ErrorHandler } from "../../../../../lib/utils/error-handler";
 import { ConfirmationButtons, ConfirmationState, ConfirmationTargets } from "../../../../../lib/entities/shared.const";
 import { operateChanges, OperateInfo, OperationState } from "../../../../../lib/components/operation/operate";
 import { errorHandler } from "../../../../../lib/utils/shared/shared.utils";
-import { ArtifactFront as Artifact } from "../artifact";
+import { ArtifactFront as Artifact, artifactImages, artifactPullCommands } from '../artifact';
 import { ArtifactService } from '../../../../../../ng-swagger-gen/services/artifact.service';
 import { Tag } from '../../../../../../ng-swagger-gen/models/tag';
 import {
@@ -327,4 +327,21 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
   public get registryUrl(): string {
     return this.systemInfo ? this.systemInfo.registry_url : '';
   }
+  hasPullCommand(): boolean {
+    return this.artifactDetails
+      && (this.artifactDetails.type ===  artifactImages[0]
+        || this.artifactDetails.type ===  artifactImages[1]
+        || this.artifactDetails.type ===  artifactImages[2]);
+  }
+  getPullCommand(tag: Tag): string {
+    let pullCommand: string = '';
+    if (tag && tag.name && this.artifactDetails ) {
+      artifactPullCommands.forEach(artifactPullCommand => {
+        if (artifactPullCommand.type === this.artifactDetails.type) {
+          pullCommand = `${artifactPullCommand.pullCommand} ${this.registryUrl}/${this.projectName}/${this.repositoryName}:${tag.name}`;
+        }
+      });
+    }
+   return pullCommand;
+  }
 }