Fix UI bugs - Pagination is missing on tag immutability rules (#20501)

Fix UI bugs- Pagination is missing on tag immutability rules Signed-off-by: xuelichao <xuel@vmware.com>
goharbor · May 30, 2024 · 1a36a95 · 1a36a95
1 parent 8bc76a6
commit 1a36a95
Show file tree

Hide file tree

Showing 23 changed files with 99 additions and 85 deletions.
diff --git a/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html b/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
@@ -218,7 +218,7 @@
                     {{ 'REPOSITORY.SIGNED' | translate }}
                 </ng-template>
             </clr-dg-column>
-            <clr-dg-column [clrDgSortBy]="'size'">
+            <clr-dg-column [clrDgSortBy]="'size'" class="size-column">
                 <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[4] }">
                     {{ 'REPOSITORY.SIZE' | translate }}
                 </ng-template>
@@ -451,13 +451,22 @@
                 </clr-dg-cell>
                 <clr-dg-cell>
                     <div class="cell">
-                        <span *ngIf="!hasSbom(artifact)">
+                        <span
+                            *ngIf="artifact?.accessoryLoading"
+                            class="spinner spinner-inline ml-2"></span>
+                        <span
+                            *ngIf="
+                                !hasSbom(artifact) &&
+                                !artifact?.accessoryLoading
+                            ">
                             {{ 'ARTIFACT.SBOM_UNSUPPORTED' | translate }}
                         </span>
                         <hbr-sbom-bar
                             (submitStopFinish)="submitSbomStopFinish($event)"
                             (scanFinished)="sbomFinished($event)"
-                            *ngIf="hasSbom(artifact)"
+                            *ngIf="
+                                hasSbom(artifact) && !artifact?.accessoryLoading
+                            "
                             [inputScanner]="
                                 handleSbomOverview(artifact.sbom_overview)
                                     ?.scanner
@@ -529,13 +538,18 @@
                                     [clrPosition]="'top-middle'"
                                     *clrIfOpen>
                                     <div
-                                        *ngFor="let label of artifact.labels"
-                                        class="margin-5px">
-                                        <hbr-label-piece
-                                            [labelWidth]="130"
-                                            [label]="label"
-                                            [withTooltip]="true">
-                                        </hbr-label-piece>
+                                        class="clr-signpost-content-label-list">
+                                        <div
+                                            *ngFor="
+                                                let label of artifact.labels
+                                            "
+                                            class="margin-5px">
+                                            <hbr-label-piece
+                                                [labelWidth]="130"
+                                                [label]="label"
+                                                [withTooltip]="true">
+                                            </hbr-label-piece>
+                                        </div>
                                     </div>
                                 </clr-signpost-content>
                             </clr-signpost>

diff --git a/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss b/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
@@ -157,12 +157,16 @@
   width: 7rem !important;
 }
 
+.size-column {
+  width: 6rem !important;
+}
+
 .vul-column {
   width: 11rem !important;
 }
 
 .sbom-column {
-  width: 6rem !important;
+  width: 7rem !important;
 }
 
 .annotations-column {
@@ -222,3 +226,9 @@
   background-color: unset;
 
 }
+
+.clr-signpost-content-label-list {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: -10px;
+}
diff --git a/...ct/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts b/...ct/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
@@ -393,7 +393,7 @@ describe('ArtifactListTabComponent', () => {
             fixture.nativeElement.querySelector('#generate-sbom-btn');
         fixture.detectChanges();
         await fixture.whenStable();
-        expect(generatedButton.disabled).toBeFalsy();
+        expect(generatedButton.disabled).toBeTruthy();
     });
     it('Stop SBOM button should be disabled', async () => {
         await fixture.whenStable();

diff --git a/...rtifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/...rtifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
@@ -888,7 +888,12 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     }
 
     selectedRowHasSbom(): boolean {
-        return !!(this.selectedRow && this.selectedRow[0]);
+        return !!(
+            this.selectedRow &&
+            this.selectedRow[0] &&
+            this.selectedRow[0].addition_links &&
+            this.selectedRow[0].addition_links[ADDITIONS.SBOMS]
+        );
     }
 
     hasVul(artifact: Artifact): boolean {
@@ -1078,6 +1083,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     getAccessoriesAsync(artifacts: ArtifactFront[]) {
         if (artifacts && artifacts.length) {
             artifacts.forEach(item => {
+                item.accessoryLoading = true;
                 const listTagParams: NewArtifactService.ListAccessoriesParams =
                     {
                         projectName: this.projectName,
@@ -1100,6 +1106,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                             }
                         }
                         item.accessories = res.body;
+                        item.accessoryLoading = false;
                     });
             });
         }

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.ts b/src/portal/src/app/base/project/repository/artifact/artifact.ts
@@ -12,6 +12,7 @@ export interface ArtifactFront extends Artifact {
     signed?: string;
     sbomDigest?: string;
     accessoryNumber?: number;
+    accessoryLoading?: boolean;
 }
 
 export interface AccessoryFront extends Accessory {

diff --git a/...portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.spec.ts b/...portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.spec.ts
@@ -213,7 +213,7 @@ describe('ResultSbomComponent (inline template)', () => {
         component.sbomOverview = mockedSbomOverview;
         fixture.detectChanges();
         expect(component.status).toBe(SBOM_SCAN_STATUS.ERROR);
-        expect(component.completed).toBeTruthy();
+        expect(component.completed).toBeFalsy();
         expect(component.queued).toBeFalsy();
         expect(component.generating).toBeFalsy();
         expect(component.stopped).toBeFalsy();

diff --git a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.ts b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.ts
@@ -129,7 +129,9 @@ export class ResultSbomComponent implements OnInit, OnDestroy {
     }
 
     public get completed(): boolean {
-        return this.status === SBOM_SCAN_STATUS.SUCCESS || !!this.sbomDigest;
+        return !!this.sbomOverview && this.status !== SBOM_SCAN_STATUS.SUCCESS
+            ? false
+            : this.status === SBOM_SCAN_STATUS.SUCCESS || !!this.sbomDigest;
     }
 
     public get error(): boolean {

diff --git a/...ct/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.html b/...ct/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.html
@@ -1,5 +1,5 @@
 <div class="tip-wrapper width-120">
-    <clr-tooltip>
+    <clr-tooltip *ngIf="showTooltip()">
         <div clrTooltipTrigger class="tip-block">
             <div *ngIf="showSbomDetailLink()" class="circle-block">
                 <a
@@ -10,16 +10,9 @@
                     {{ 'SBOM.Details' | translate }}</a
                 >
             </div>
-            <div
-                *ngIf="showNoSbom()"
-                class="tip-wrapper bar-block-none shadow-none width-120">
+            <div *ngIf="showNoSbom()" class="tip-wrapper label width-120">
                 {{ 'SBOM.NO_SBOM' | translate }}
             </div>
-            <div
-                *ngIf="!showSbomDetailLink() && !showNoSbom()"
-                class="tip-wrapper width-120">
-                {{ 'SBOM.COMPLETED' | translate }}
-            </div>
         </div>
         <clr-tooltip-content
             class="w-800"
@@ -37,9 +30,6 @@
                 <ng-container *ngIf="showNoSbom()">
                     <span>{{ 'SBOM.NO_SBOM' | translate }}</span>
                 </ng-container>
-                <ng-container *ngIf="!showSbomDetailLink() && !showNoSbom()">
-                    <span>{{ 'SBOM.COMPLETED' | translate }}</span>
-                </ng-container>
             </div>
             <hr />
             <div *ngIf="scanner">
@@ -62,25 +52,4 @@
             </div>
         </clr-tooltip-content>
     </clr-tooltip>
-    <clr-tooltip class="margin-left-5" *ngIf="isLimitedSuccess()">
-        <div clrTooltipTrigger>
-            <clr-icon
-                shape="exclamation-triangle"
-                size="20"
-                class="is-warning"></clr-icon>
-        </div>
-        <clr-tooltip-content [clrSize]="'lg'" *clrIfOpen>
-            <div class="font-weight-600">
-                <span class="bar-scanning-time"
-                    >{{ 'SBOM.CHART.SCANNING_PERCENT' | translate }}
-                </span>
-                <span>{{ completePercent }}</span>
-            </div>
-            <div>
-                <span>{{
-                    'SBOM.CHART.SCANNING_PERCENT_EXPLAIN' | translate
-                }}</span>
-            </div>
-        </clr-tooltip-content>
-    </clr-tooltip>
 </div>
diff --git a/...ct/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.scss b/...ct/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.scss
@@ -48,6 +48,11 @@ hr {
 
 .tip-block {
     position: relative;
+
+    .label {
+        max-width: 80%;
+        min-width: 50%;
+    }
 }
 
 .margin-right-5 {

diff --git a/...repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.spec.ts b/...repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.spec.ts
@@ -74,7 +74,6 @@ describe('SbomTipHistogramComponent', () => {
     it('Test SbomTipHistogramComponent basic functions', () => {
         fixture.whenStable().then(() => {
             expect(component).toBeTruthy();
-            expect(component.isLimitedSuccess()).toBeFalsy();
             expect(component.showNoSbom()).toBeTruthy();
             expect(component.isThemeLight()).toBeFalsy();
             expect(component.duration()).toBe('0');

diff --git a/...ject/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts b/...ject/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts
@@ -55,7 +55,7 @@ export class SbomTipHistogramComponent {
 
     public getSbomAccessories(): Accessory[] {
         return (
-            this.accessories.filter(
+            this.accessories?.filter(
                 accessory => accessory.type === AccessoryType.SBOM
             ) ?? []
         );
@@ -67,11 +67,6 @@ export class SbomTipHistogramComponent {
             : '0%';
     }
 
-    isLimitedSuccess(): boolean {
-        return (
-            this.sbomSummary && this.sbomSummary.complete_percent < SUCCESS_PCT
-        );
-    }
     get completeTimestamp(): Date {
         return this.sbomSummary && this.sbomSummary.end_time
             ? this.sbomSummary.end_time
@@ -83,7 +78,17 @@ export class SbomTipHistogramComponent {
     }
 
     showNoSbom(): boolean {
-        return !this.sbomDigest && this.getSbomAccessories().length === 0;
+        return !this.sbomDigest || this.getSbomAccessories().length === 0;
+    }
+
+    showTooltip() {
+        return (
+            !this.sbomSummary ||
+            !(
+                this.sbomSummary &&
+                this.sbomSummary.scan_status !== SBOM_SCAN_STATUS.SUCCESS
+            )
+        );
     }
 
     isThemeLight() {

diff --git a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss
@@ -14,7 +14,8 @@ hbr-sbom-bar {
     }
 
     .label {
-        width: 50%;
+        max-width: 60%;
+        min-width: 50%;
     }
 }
 

diff --git a/...tal/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.ts b/...tal/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.ts
@@ -58,6 +58,7 @@ export class ImmutableTagComponent implements OnInit {
         this.immutableService
             .ListImmuRules({
                 projectNameOrId: this.projectId.toString(),
+                pageSize: 15,
             })
             .subscribe({
                 next: res => {

diff --git a/src/portal/src/app/shared/units/utils.ts b/src/portal/src/app/shared/units/utils.ts
@@ -293,7 +293,7 @@ export const VULNERABILITY_SCAN_STATUS = {
  */
 export const SBOM_SCAN_STATUS = {
     // front-end status
-    NOT_GENERATED_SBOM: 'Not generated SBOM',
+    NOT_GENERATED_SBOM: 'No SBOM',
     // back-end status
     PENDING: 'Pending',
     RUNNING: 'Running',

diff --git a/src/portal/src/i18n/lang/de-de-lang.json b/src/portal/src/i18n/lang/de-de-lang.json
@@ -1050,11 +1050,11 @@
             "FOOT_OF": "of"
         },
         "STATE": {
-            "OTHER_STATUS": "Not Generated",
+            "OTHER_STATUS": "No SBOM",
             "QUEUED": "Queued",
             "ERROR": "View Log",
             "SCANNING": "Generating",
-            "STOPPED": "SBOM scan stopped"
+            "STOPPED": "Generation stopped"
         },
         "NO_SBOM": "No SBOM",
         "PACKAGES": "SBOM",
@@ -1115,7 +1115,7 @@
         "REPORTED_BY": "GEMELDET VON {{scanner}}",
         "NO_SCANNER": "KEIN SCANNER",
         "TRIGGER_STOP_SUCCESS": "Alle Scans erfolgreich zum Anhalten aufgefordert!",
-        "STOP_NOW": "Scan STOPPEN"
+        "STOP_NOW": "Stop Scan Vulnerability"
     },
     "PUSH_IMAGE": {
         "TITLE": "Push Befehl",

diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
@@ -1051,11 +1051,11 @@
             "FOOT_OF": "of"
         },
         "STATE": {
-            "OTHER_STATUS": "Not Generated",
+            "OTHER_STATUS": "No SBOM",
             "QUEUED": "Queued",
             "ERROR": "View Log",
             "SCANNING": "Generating",
-            "STOPPED": "SBOM scan stopped"
+            "STOPPED": "Generation stopped"
         },
         "NO_SBOM": "No SBOM",
         "PACKAGES": "SBOM",
@@ -1116,7 +1116,7 @@
         "REPORTED_BY": "Reported by {{scanner}}",
         "NO_SCANNER": "NO SCANNER",
         "TRIGGER_STOP_SUCCESS": "Trigger stopping scan successfully",
-        "STOP_NOW": "Stop Scan"
+        "STOP_NOW": "Stop Scan Vulnerability"
     },
     "PUSH_IMAGE": {
         "TITLE": "Push Command",

diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
@@ -1049,11 +1049,11 @@
             "FOOT_OF": "of"
         },
         "STATE": {
-            "OTHER_STATUS": "Not Generated",
+            "OTHER_STATUS": "No SBOM",
             "QUEUED": "Queued",
             "ERROR": "View Log",
             "SCANNING": "Generating",
-            "STOPPED": "SBOM scan stopped"
+            "STOPPED": "Generation stopped"
         },
         "NO_SBOM": "No SBOM",
         "PACKAGES": "SBOM",
@@ -1114,7 +1114,7 @@
         "REPORTED_BY": "Reported by {{scanner}}",
         "NO_SCANNER": "NO SCANNER",
         "TRIGGER_STOP_SUCCESS": "Trigger stopping scan successfully",
-        "STOP_NOW": "Stop Scan"
+        "STOP_NOW": "Stop Scan Vulnerability"
     },
     "PUSH_IMAGE": {
         "TITLE": "Push Command",

diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -1049,11 +1049,11 @@
             "FOOT_OF": "of"
         },
         "STATE": {
-            "OTHER_STATUS": "Not Generated",
+            "OTHER_STATUS": "No SBOM",
             "QUEUED": "Queued",
             "ERROR": "View Log",
             "SCANNING": "Generating",
-            "STOPPED": "SBOM scan stopped"
+            "STOPPED": "Generation stopped"
         },
         "NO_SBOM": "No SBOM",
         "PACKAGES": "SBOM",
@@ -1114,7 +1114,7 @@
         "REPORTED_BY": "Rapporté par {{scanner}}",
         "NO_SCANNER": "Aucun scanneur",
         "TRIGGER_STOP_SUCCESS": "Déclenchement avec succès de l'arrêt d'analyse",
-        "STOP_NOW": "Stop Scan"
+        "STOP_NOW": "Stop Scan Vulnerability"
     },
     "PUSH_IMAGE": {
         "TITLE": "Commande de push",