Update push and pull command for helm (#16553)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -190,8 +190,8 @@
                         </clr-tooltip>
                     </div>
                 </clr-dg-cell>
-                <clr-dg-cell title="{{artifact.pullCommand}}">
+                <clr-dg-cell >
-                    <hbr-copy-input *ngIf="artifact.pullCommand" #copyInput (onCopyError)="onCpError($event)" iconMode="true" defaultValue="{{artifact.pullCommand}}"></hbr-copy-input>
+                    <hbr-copy-input [title]="getPullCommand(artifact)"  *ngIf="getPullCommand(artifact)"  [iconMode]="true" [defaultValue]="getPullCommand(artifact)"></hbr-copy-input>
                 </clr-dg-cell>
                 <clr-dg-cell *ngIf="depth">
                     <div class="cell">

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -31,7 +31,6 @@ import {
     VULNERABILITY_SCAN_STATUS
 } from "../../../../../../../shared/units/utils";
 import { ImageNameInputComponent } from "../../../../../../../shared/components/image-name-input/image-name-input.component";
-import { CopyInputComponent } from "../../../../../../../shared/components/push-image/copy-input.component";
 import { ErrorHandler } from "../../../../../../../shared/units/error-handler";
 import { ArtifactService } from "../../../artifact.service";
 import { OperationService } from "../../../../../../../shared/components/operation/operation.service";
@@ -42,7 +41,7 @@ import {
     artifactDefault,
     ArtifactFront as Artifact,
     ArtifactFront,
-    artifactPullCommands,
+    ArtifactType, getPullCommandByDigest, getPullCommandByTag,
     mutipleFilter
 } from '../../../artifact';
 import { Project } from "../../../../../project";
@@ -130,8 +129,6 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     imageNameInput: ImageNameInputComponent;
 
     @ViewChild("digestTarget") textInput: ElementRef;
-    @ViewChild("copyInput") copyInput: CopyInputComponent;
-
     pageSize: number = DEFAULT_PAGE_SIZE;
     currentPage = 1;
     totalCount = 0;
@@ -408,7 +405,6 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                         this.artifactList.forEach((artifact, index) => {
                             artifact.platform = clone(platFormAttr[index].platform);
                         });
-                        this.getPullCommand(this.artifactList);
                         this.getArtifactTagsAsync(this.artifactList);
                         this.getAccessoriesAsync(this.artifactList);
                         this.checkCosignAsync(this.artifactList);
@@ -442,7 +438,6 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                         }
                     }
                     this.artifactList = res.body;
-                    this.getPullCommand(this.artifactList);
                     this.getArtifactTagsAsync(this.artifactList);
                     this.getAccessoriesAsync(this.artifactList);
                     this.checkCosignAsync(this.artifactList);
@@ -466,17 +461,16 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
         this.clrLoad(st);
     }
 
-    getPullCommand(artifactList: Artifact[]) {
+    getPullCommand(artifact: Artifact): string {
-        artifactList.forEach(artifact => {
+        let pullCommand: string = '';
-            artifact.pullCommand = '';
+        if (artifact.type === ArtifactType.CHART && artifact.tags && artifact.tags[0]) {
-            artifactPullCommands.forEach(artifactPullCommand => {
+            pullCommand = getPullCommandByTag(artifact.type, `${this.registryUrl ?
-                if (artifactPullCommand.type === artifact.type) {
+                this.registryUrl : location.hostname}/${this.projectName}/${this.repoName}`, artifact.tags[0]?.name);
-                    artifact.pullCommand =
+        } else {
-                        `${artifactPullCommand.pullCommand} ${this.registryUrl ?
+            pullCommand = getPullCommandByDigest(artifact.type, `${this.registryUrl ?
-                            this.registryUrl : location.hostname}/${this.projectName}/${this.repoName}@${artifact.digest}`;
+                this.registryUrl : location.hostname}/${this.projectName}/${this.repoName}`, artifact.digest);
         }
-            });
+        return pullCommand;
-        });
     }
     labelSelectedChange(artifact?: Artifact[]): void {
         this.artifactListPageService.imageStickLabels.forEach(data => {
@@ -980,11 +974,6 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             this.onSendingScanCommand = e;
         }
     }
-
-    // pull command
-    onCpError($event: any): void {
-        this.copyInput.setPullCommendShow();
-    }
     handleScanOverview(scanOverview: any): any {
         if (scanOverview) {
             return Object.values(scanOverview)[0];

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.ts

@@ -8,7 +8,7 @@ import { OperationService } from "../../../../../shared/components/operation/ope
 import { ErrorHandler } from "../../../../../shared/units/error-handler";
 import { ConfirmationButtons, ConfirmationState, ConfirmationTargets } from "../../../../../shared/entities/shared.const";
 import { operateChanges, OperateInfo, OperationState } from "../../../../../shared/components/operation/operate";
-import { AccessoryQueryParams, AccessoryType, ArtifactFront as Artifact, artifactImages, artifactPullCommands } from '../artifact';
+import { AccessoryQueryParams, AccessoryType, ArtifactFront as Artifact, ArtifactType, getPullCommandByTag } from '../artifact';
 import { ArtifactService } from '../../../../../../../ng-swagger-gen/services/artifact.service';
 import { Tag } from '../../../../../../../ng-swagger-gen/models/tag';
 import { SystemInfo, SystemInfoService, UserPermissionService, USERSTATICPERMISSION } from "../../../../../shared/services";
@@ -143,7 +143,7 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
       if (res.headers) {
         let xHeader: string = res.headers.get("x-total-count");
         if (xHeader) {
-          this.totalCount = Number.parseInt(xHeader);
+          this.totalCount = Number.parseInt(xHeader, 10);
         }
       }
       this.currentTags = res.body;
@@ -340,19 +340,16 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
   }
   hasPullCommand(): boolean {
     return this.artifactDetails
-      && (this.artifactDetails.type ===  artifactImages[0]
+      && (this.artifactDetails.type ===  ArtifactType.IMAGE
-        || this.artifactDetails.type ===  artifactImages[1]
+        || this.artifactDetails.type ===  ArtifactType.CHART
-        || this.artifactDetails.type ===  artifactImages[2])
+        || this.artifactDetails.type ===  ArtifactType.CNAB)
         && this.accessoryType !== AccessoryType.COSIGN;
   }
   getPullCommand(tag: Tag): string {
     let pullCommand: string = '';
     if (tag && tag.name && this.artifactDetails ) {
-      artifactPullCommands.forEach(artifactPullCommand => {
+      pullCommand = getPullCommandByTag(this.artifactDetails?.type,
-        if (artifactPullCommand.type === this.artifactDetails.type) {
+          `${this.registryUrl}/${this.projectName}/${this.repositoryName}`, tag.name);
-          pullCommand = `${artifactPullCommand.pullCommand} ${this.registryUrl}/${this.projectName}/${this.repositoryName}:${tag.name}`;
-        }
-      });
     }
     return pullCommand;
   }

src/portal/src/app/base/project/repository/artifact/artifact.ts

@@ -66,30 +66,45 @@ export enum AccessoryType {
   COSIGN = 'signature.cosign'
 }
 
-export const artifactImages = [
+export enum ArtifactType {
-  'IMAGE', 'CHART', 'CNAB', 'OPENPOLICYAGENT'
+  IMAGE = 'IMAGE',
-];
+  CHART = 'CHART',
-export const artifactPullCommands = [
+  CNAB = 'CNAB',
-  {
+  OPENPOLICYAGENT = 'OPENPOLICYAGENT'
-    type: artifactImages[0],
-    pullCommand: 'docker pull'
-  },
-  {
-    type: AccessoryType.COSIGN,
-    pullCommand: 'docker pull'
-  },
-  {
-    type: artifactImages[1],
-    pullCommand: 'helm chart pull'
-  },
-  {
-    type: artifactImages[2],
-    pullCommand: 'cnab-to-oci pull'
 }
-];
+
 export const artifactDefault = "images/artifact-default.svg";
 
 export enum AccessoryQueryParams {
   ACCESSORY_TYPE = 'accessoryType'
 }
 
+export function getPullCommandByDigest(artifactType: string, url: string, digest: string): string {
+  let pullCommand: string = '';
+  if (artifactType && url && digest) {
+    if (artifactType === ArtifactType.IMAGE) {
+      pullCommand = `docker pull ${url}@${digest}`;
+    }
+    if (artifactType === ArtifactType.CNAB) {
+      pullCommand = `cnab-to-oci pull ${url}@${digest}`;
+    }
+  }
+  return pullCommand;
+}
+
+export function getPullCommandByTag(artifactType: string, url: string, tag: string): string {
+  let pullCommand: string = '';
+  if (artifactType && url && tag) {
+    if (artifactType === ArtifactType.IMAGE) {
+      pullCommand = `docker pull ${url}:${tag}`;
+    }
+    if (artifactType === ArtifactType.CNAB) {
+      pullCommand = `cnab-to-oci pull ${url}:${tag}`;
+    }
+    if (artifactType === ArtifactType.CHART) {
+      pullCommand = `helm pull oci://${url} --version ${tag}`;
+    }
+  }
+  return pullCommand;
+}
+

src/portal/src/app/shared/components/push-image/push-image.component.ts

@@ -30,13 +30,11 @@ export class PushImageButtonComponent {
     return `docker push ${this.registryUrl}/${this.projectName}/REPOSITORY[:TAG]`;
   }
   public get tagCommandChart(): string {
-    return `helm chart save CHART_PATH ${this.registryUrl}/${
+    return `helm package CHART_PATH`;
-      this.projectName
-    }/REPOSITORY[:TAG]`;
   }
 
   public get pushCommandChart(): string {
-    return `helm chart push ${this.registryUrl}/${this.projectName}/REPOSITORY[:TAG]`;
+    return `helm push CHART_PACKAGE oci://${this.registryUrl}/${this.projectName}`;
   }
 
   public get pushCommandCnab(): string {

src/portal/src/i18n/lang/de-de-lang.json

@@ -1088,7 +1088,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Tag ein Chart für dieses Projekt:",
+        "TAG_COMMAND_CHART": "Package ein Chart für dieses Projekt:",
         "PUSH_COMMAND_CHART": "Push ein Chart für dieses Projekt:",
         "PUSH_COMMAND_CNAB": "Push ein CNAB für dieses Projekt:",
         "TOOLTIP": "Befehlreferenz um ein Artefakt in das Projekt zu pushen.",

src/portal/src/i18n/lang/en-us-lang.json

@@ -1088,7 +1088,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Tag a chart for this project:",
+        "TAG_COMMAND_CHART": "Package a chart for this project:",
         "PUSH_COMMAND_CHART": "Push a chart to this project:",
         "PUSH_COMMAND_CNAB": "Push a CNAB to this project:",
         "TOOLTIP": "Command references for pushing an artifact to this project.",

src/portal/src/i18n/lang/es-es-lang.json

@@ -1089,7 +1089,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Tag a chart for this project:",
+        "TAG_COMMAND_CHART": "Package a chart for this project:",
         "PUSH_COMMAND_CHART": "Push a chart to this project:",
         "PUSH_COMMAND_CNAB": "Push a CNAB to this project:",
         "TOOLTIP": "Command references for pushing an artifact to this project.",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -1061,7 +1061,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Tag a chart for this project:",
+        "TAG_COMMAND_CHART": "Package a chart for this project:",
         "PUSH_COMMAND_CHART": "Push a chart to this project:",
         "PUSH_COMMAND_CNAB": "Push a CNAB to this project:",
         "TOOLTIP": "Command references for pushing an artifact to this project.",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -1084,7 +1084,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Colocar tag em chart deste projeto:",
+        "TAG_COMMAND_CHART": "Package a chart for this project:",
         "PUSH_COMMAND_CHART": "Enviar um chart a este projeto:",
         "PUSH_COMMAND_CNAB": "Enviar um CNAB a este projeto:",
         "TOOLTIP": "Referência de comandos para enviar artefatos a este projeto.",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -1088,7 +1088,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "Tag a chart for this project:",
+        "TAG_COMMAND_CHART": "Package a chart for this project:",
         "PUSH_COMMAND_CHART": "Push a chart to this project:",
         "PUSH_COMMAND_CNAB": "Push a CNAB to this project:",
         "TOOLTIP": "Command references for pushing an artifact to this project.",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -1089,7 +1089,7 @@
         "DOCKER": "Docker",
         "HELM": "Helm",
         "CNAB": "CNAB",
-        "TAG_COMMAND_CHART": "在项目中标记 chart",
+        "TAG_COMMAND_CHART": "在项目中打包 chart",
         "PUSH_COMMAND_CHART": "推送 chart 到当前项目",
         "PUSH_COMMAND_CNAB": "推送 CNAB 到当前项目",
         "TOOLTIP": "推送一个 artifact 到当前项目的参考命令。",

src/portal/src/i18n/lang/zh-tw-lang.json

@@ -1081,6 +1081,12 @@
   },
   "PUSH_IMAGE":{
     "TITLE": "推送鏡像的Docker命令",
+    "DOCKER": "Docker",
+    "HELM": "Helm",
+    "CNAB": "CNAB",
+    "TAG_COMMAND_CHART": "Package a chart for this project:",
+    "PUSH_COMMAND_CHART": "Push a chart to this project:",
+    "PUSH_COMMAND_CNAB": "Push a CNAB to this project:",
     "TOOLTIP": "推送一個鏡像到當前項目的參考命令。",
     "TAG_COMMAND": "在項目中標記鏡像：",
     "PUSH_COMMAND": "推送鏡像到當前項目：",