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>
2024-11-21 17:55:30 +01:00 · 2024-05-30 18:18:57 +08:00 · 2024-05-30 18:18:57 +08:00 · 1a36a95a2b
commit 1a36a95a2b
parent 8bc76a6548
23 changed files with 99 additions and 85 deletions
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/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>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
+++ b/src/portal/src/app/base/project/repository/artifact/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;
+}
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
+++ b/src/portal/src/app/base/project/repository/artifact/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();
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/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;
                    });
            });
        }
--- 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 {
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.spec.ts
+++ b/src/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();
--- 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 {
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.html
+++ b/src/portal/src/app/base/project/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>
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.scss
+++ b/src/portal/src/app/base/project/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 {
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.spec.ts
+++ b/src/portal/src/app/base/project/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');
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts
+++ b/src/portal/src/app/base/project/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() {
--- 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%;
    }
 }

--- a/src/portal/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.ts
+++ b/src/portal/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 => {
--- 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',
--- 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",
--- 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",
--- 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",
--- 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",
--- a/src/portal/src/i18n/lang/ko-kr-lang.json
+++ b/src/portal/src/i18n/lang/ko-kr-lang.json
@ -1048,11 +1048,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",
@ -1113,7 +1113,7 @@
        "REPORTED_BY": "{{scanner}}로 보고 됨",
        "NO_SCANNER": "스캐너 없음",
        "TRIGGER_STOP_SUCCESS": "트리거 중지 스캔이 성공적으로 수행되었습니다",
-        "STOP_NOW": "Stop Scan"
+        "STOP_NOW": "Stop Scan Vulnerability"
    },
    "PUSH_IMAGE": {
        "TITLE": "푸시 명령어",
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@ -1047,11 +1047,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",
@ -1112,7 +1112,7 @@
        "REPORTED_BY": "Encontrado com {{scanner}}",
        "NO_SCANNER": "NENHUM",
        "TRIGGER_STOP_SUCCESS": "Exame foi interrompido",
-        "STOP_NOW": "Stop Scan"
+        "STOP_NOW": "Stop Scan Vulnerability"
    },
    "PUSH_IMAGE": {
        "TITLE": "Comando Push",
--- a/src/portal/src/i18n/lang/tr-tr-lang.json
+++ b/src/portal/src/i18n/lang/tr-tr-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": "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",
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -1048,11 +1048,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",
@ -1113,7 +1113,7 @@
        "REPORTED_BY": "结果由 {{scanner}} 提供",
        "NO_SCANNER": "无扫描器",
        "TRIGGER_STOP_SUCCESS": "停止扫描成功",
-        "STOP_NOW": "停止扫描"
+        "STOP_NOW": "Stop Scan Vulnerability"
    },
    "PUSH_IMAGE": {
        "TITLE": "推送命令",
--- a/src/portal/src/i18n/lang/zh-tw-lang.json
+++ b/src/portal/src/i18n/lang/zh-tw-lang.json
@ -1047,11 +1047,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",
@ -1112,7 +1112,7 @@
    "REPORTED_BY": "由 {{scanner}} 報告",
    "NO_SCANNER": "無掃描器",
    "TRIGGER_STOP_SUCCESS": "成功觸發停止掃描",
-    "STOP_NOW": "立即停止掃描"
+    "STOP_NOW": "Stop Scan Vulnerability"
  },
  "PUSH_IMAGE": {
    "TITLE": "推送命令",