Add limitation to artifact tags

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

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

@@ -192,7 +192,6 @@
                 </clr-dg-cell>
                 <clr-dg-cell class="w-rem-4">
                     <div *ngIf="artifact.tags" class="truncated width-p-100">
-
                         <clr-tooltip class="width-p-100">
                             <div clrTooltipTrigger class="level-border">
                                 <div>
@@ -202,7 +201,7 @@
                                         </span>
                                         <span class="eslip"
                                             *ngIf="artifact?.tags?.length>1">...</span>
-                                        <span *ngIf="artifact?.tags?.length>1" > ({{artifact?.tags?.length}})</span>
+                                        <span *ngIf="artifact?.tags?.length>1" > ({{artifact?.tagNumber}})</span>
 
                                     </div>
                                 </div>
@@ -222,6 +221,7 @@
                                         </tr>
                                     </thead>
                                     <tbody class="tag-tbody">
+                                        <!--display less than 9 tags(too many tags will make UI stuck)-->
                                         <tr class="tag-tr" *ngFor="let tag of artifact.tags">
                                             <td class="left tag-body-color">{{tag.name}}</td>
                                             <td  *ngIf="withNotary" class="left tag-body-color" [ngSwitch]="tag.signed">
@@ -237,6 +237,7 @@
                                             <td class="left tag-body-color">{{tag.pull_time === availableTime ? '':(tag.pull_time | date: 'short')}}</td>
                                             <td class="left tag-body-color">{{tag.push_time | date: 'short'}}</td>
                                         </tr>
+                                        <tr *ngIf="artifact?.tagNumber > 8">...</tr>
                                     </tbody>
                                 </table>
                             </clr-tooltip-content>

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

@@ -58,14 +58,13 @@ import {
   ArtifactFront as Artifact,
   mutipleFilter,
   artifactPullCommands,
-  artifactDefault
+  artifactDefault, ArtifactFront
 } from '../../../artifact/artifact';
 import { Project } from "../../../../project";
 import { ArtifactService as NewArtifactService } from "../../../../../../../ng-swagger-gen/services/artifact.service";
 import { ADDITIONS } from "../../../artifact/artifact-additions/models";
 import { Platform } from "../../../../../../../ng-swagger-gen/models/platform";
-import { IconService } from '../../../../../../../ng-swagger-gen/services/icon.service';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { SafeUrl } from '@angular/platform-browser';
 export interface LabelState {
   iconsShow: boolean;
   label: Label;
@@ -91,7 +90,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   @Input() registryUrl: string;
   @Input() withNotary: boolean;
   @Input() withAdmiral: boolean;
-  artifactList: Artifact[] = [];
+  artifactList: ArtifactFront[] = [];
   availableTime = AVAILABLE_TIME;
   showTagManifestOpened: boolean;
   retagDialogOpened: boolean;
@@ -342,8 +341,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
           withImmutableStatus: true,
           withLabel: true,
           withScanOverview: true,
-          withSignature: true,
-          withTag: true
+          withTag: false
         };
         this.newArtifactService.getArtifact(artifactParam).subscribe(
           res => {
@@ -359,8 +357,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                   withImmutableStatus: true,
                   withLabel: true,
                   withScanOverview: true,
-                  withSignature: true,
-                  withTag: true
+                  withTag: false
                 };
                 platFormAttr.push({platform: child.platform});
                 observableLists.push(this.newArtifactService.getArtifact(childParams));
@@ -374,6 +371,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                 artifact.platform = clone(platFormAttr[index].platform);
               });
               this.getPullCommand(this.artifactList);
+              this.getArtifactTagsAsync(this.artifactList);
               this.getIconsFromBackEnd();
             }, error => {
               this.errorHandlerService.error(error);
@@ -388,7 +386,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
           repositoryName: dbEncodeURIComponent(this.repoName),
           withLabel: true,
           withScanOverview: true,
-          withTag: true
+          withTag: false
         };
         Object.assign(listArtifactParams, params);
         this.newArtifactService.listArtifactsResponse(listArtifactParams)
@@ -404,6 +402,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             this.artifactList = doSorting<Artifact>(this.artifactList, state);
 
             this.getPullCommand(this.artifactList);
+            this.getArtifactTagsAsync(this.artifactList);
             this.getIconsFromBackEnd();
           }, error => {
             // error
@@ -1012,4 +1011,31 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   getIcon(icon: string): SafeUrl {
     return this.artifactService.getIcon(icon);
   }
+  // get Tags and display less than 9 tags(too many tags will make UI stuck)
+  getArtifactTagsAsync(artifacts: ArtifactFront[]) {
+    if (artifacts && artifacts.length) {
+      artifacts.forEach(item => {
+        const listTagParams: NewArtifactService.ListTagsParams = {
+          projectName: this.projectName,
+          repositoryName: dbEncodeURIComponent(this.repoName),
+          reference: item.digest,
+          withSignature: true,
+          withImmutableStatus: true,
+          page: 1,
+          pageSize: 8
+        };
+        this.newArtifactService.listTagsResponse(listTagParams).subscribe(
+            res => {
+              if (res.headers) {
+                let xHeader: string = res.headers.get("x-total-count");
+                if (xHeader) {
+                  item.tagNumber = Number.parseInt(xHeader);
+                }
+              }
+              item.tags = res.body;
+            }
+        );
+      });
+    }
+  }
 }

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

@@ -86,21 +86,21 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
       .subscribe(systemInfo => this.systemInfo = systemInfo, error => this.errorHandlerService.error(error));
   }
   checkTagName(name) {
-      let listArtifactParams: ArtifactService.ListArtifactsParams = {
+      const listTagParams: ArtifactService.ListTagsParams = {
         projectName: this.projectName,
         repositoryName: dbEncodeURIComponent(this.repositoryName),
-        withLabel: true,
-        withScanOverview: true,
-        withTag: true,
-        q: encodeURIComponent(`tags=${name}`)
+        reference: this.artifactDetails.digest,
+        withSignature: true,
+        withImmutableStatus: true,
+        q: encodeURIComponent(`name=${name}`)
       };
-      return this.artifactService.listArtifacts(listArtifactParams)
+      return this.artifactService.listTags(listTagParams)
       .pipe(finalize(() => this.tagNameCheckOnGoing = false));
   }
   invalidCreateTag() {
     if (!this.tagNameCheckSub) {
       this.tagNameCheckSub = this.tagNameChecker
-        .pipe(debounceTime(200))
+        .pipe(debounceTime(500))
         .pipe(distinctUntilChanged())
         .pipe(switchMap(name => {
           this.tagNameCheckOnGoing = true;

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

@@ -6,6 +6,7 @@ export interface ArtifactFront extends Artifact {
     showImage?: string;
     pullCommand?: string;
     annotationsArray?: Array<{[key: string]: any}>;
+    tagNumber?: number;
 }
 
 export const mutipleFilter = [

src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts

@@ -44,7 +44,7 @@ export class ArtifactDetailRoutingResolverService implements Resolve<Artifact> {
               projectName: project.name,
               withLabel: true,
               withScanOverview: true,
-              withSignature: true,
+              withTag: false,
               withImmutableStatus: true
             }), of(project)]);
           }),