harbor/src/portal/src/app/base/project/scanner/scanner.component.html

<div *ngIf="loading" class="clr-row mt-2 center">
    <span class="spinner spinner-md"></span>
</div>
<div *ngIf="!loading" class="clr-form clr-form-horizontal">
    <div class="clr-form-control">
        <label *ngIf="!scanner" class="clr-control-label name">{{
            'SCANNER.SCANNER' | translate
        }}</label>
        <div class="clr-control-container">
            <button
                *ngIf="
                    !scanner &&
                    hasCreatePermission &&
                    scanners &&
                    scanners.length > 0
                "
                id="edit-scanner-copy"
                class="btn btn-primary"
                (click)="open()">
                {{ 'SCANNER.EDIT' | translate }}
            </button>
            <label
                *ngIf="
                    !scanner &&
                    hasCreatePermission &&
                    !(scanners && scanners.length > 0)
                "
                class="name"
                >{{ 'SCANNER.NOT_AVAILABLE' | translate }}</label
            >
            <label *ngIf="!scanner && !hasCreatePermission" class="name">{{
                'SCANNER.NO_PROJECT_SCANNER' | translate
            }}</label>
        </div>
    </div>
    <ng-container *ngIf="scanner">
        <div class="clr-form-control">
            <label class="clr-control-label name">{{
                'SCANNER.NAME' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-input-wrapper">
                    <div class="clr-input-wrapper name">
                        <span id="scanner-name" class="scanner-name">{{
                            scanner?.name
                        }}</span>
                        <span
                            *ngIf="scanner?.disabled"
                            class="label label-warning ml-1"
                            >{{ 'SCANNER.DISABLED' | translate }}</span
                        >
                        <span
                            *ngIf="scanner?.health === 'unhealthy'"
                            class="label label-danger ml-1"
                            >{{ 'SCANNER.UNHEALTHY' | translate }}</span
                        >
                        <span
                            *ngIf="scanner?.health === 'healthy'"
                            class="label label-success ml-1"
                            >{{ 'SCANNER.HEALTHY' | translate }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="clr-form-control">
            <label class="clr-control-label">{{
                'SCANNER.ENDPOINT' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-input-wrapper">
                    <input
                        [ngModel]="scanner?.url"
                        readonly
                        class="clr-input width-240"
                        type="text"
                        id="scanner-endpoint"
                        autocomplete="off" />
                </div>
            </div>
        </div>
        <div class="clr-form-control" *ngIf="scanner?.adapter">
            <label class="clr-control-label">{{
                'SCANNER.ADAPTER' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-input-wrapper">
                    <input
                        [ngModel]="scanner?.adapter"
                        readonly
                        class="clr-input width-240"
                        type="text"
                        id="scanner-scanner"
                        autocomplete="off" />
                </div>
            </div>
        </div>
        <div class="clr-form-control" *ngIf="scanner?.vendor">
            <label class="clr-control-label">{{
                'SCANNER.VENDOR' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-input-wrapper">
                    <input
                        [ngModel]="scanner?.vendor"
                        readonly
                        class="clr-input width-240"
                        type="text"
                        id="scanner-vendor"
                        autocomplete="off" />
                </div>
            </div>
        </div>
        <div class="clr-form-control" *ngIf="scanner?.version">
            <label class="clr-control-label">{{
                'SCANNER.VERSION' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-input-wrapper">
                    <input
                        [ngModel]="scanner?.version"
                        readonly
                        class="clr-input width-240"
                        type="text"
                        id="scanner-version"
                        autocomplete="off" />
                </div>
            </div>
        </div>
    </ng-container>
    <button
        *ngIf="hasCreatePermission && scanners && scanners.length > 0"
        id="edit-scanner"
        type="button"
        (click)="open()"
        class="btn btn-secondary mt-1">
        {{ 'SCANNER.SELECT_SCANNER' | translate }}
    </button>
</div>

<clr-modal
    [clrModalSize]="'xl'"
    [(clrModalOpen)]="opened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <h3 class="modal-title">{{ 'SCANNER.SELECT_SCANNER' | translate }}</h3>
    <div class="modal-body body-format">
        <inline-alert class="modal-title"></inline-alert>
        <clr-datagrid [(clrDgSingleSelected)]="selectedScanner">
            <clr-dg-column [clrDgField]="'name'">{{
                'SCANNER.NAME' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'url'">{{
                'SCANNER.ENDPOINT' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'SCANNER.DEFAULT' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'SCANNER.DESCRIPTION' | translate
            }}</clr-dg-column>
            <clr-dg-row
                *clrDgItems="let scanner of scanners"
                [clrDgItem]="scanner">
                <clr-dg-cell>{{ scanner.name }}</clr-dg-cell>
                <clr-dg-cell>{{ scanner.url }}</clr-dg-cell>
                <clr-dg-cell class="position-relative">
                    <span *ngIf="scanner.is_default" class="label label-info">{{
                        scanner.is_default
                    }}</span>
                    <span
                        *ngIf="!scanner.is_default"
                        class="label label-info"
                        >{{ scanner.is_default }}</span
                    >
                </clr-dg-cell>
                <clr-dg-cell>{{ scanner.description }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <span *ngIf="scanners?.length > 0"
                    >1 - {{ scanners?.length }} {{ 'WEBHOOK.OF' | translate }}
                </span>
                {{ scanners?.length }} {{ 'WEBHOOK.ITEMS' | translate }}
                <clr-dg-pagination [clrDgPageSize]="10"></clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
    <div class="modal-footer">
        <button
            id="cancel"
            type="button"
            class="btn btn-outline"
            (click)="close()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            id="save-scanner"
            type="button"
            [clrLoading]="saveBtnState"
            class="btn btn-primary"
            [disabled]="!valid"
            (click)="save()">
            {{ 'BUTTON.OK' | translate }}
        </button>
    </div>
</clr-modal>