harbor/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html

490 lines
20 KiB
HTML

<form #systemConfigFrom="ngForm" class="clr-form clr-form-horizontal">
<section>
<clr-select-container>
<label for="proCreation"
>{{ 'CONFIG.PRO_CREATION_RESTRICTION' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION'
| translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<select
clrSelect
id="proCreation"
name="proCreation"
class="pro-creation"
[(ngModel)]="currentConfig.project_creation_restriction.value"
[disabled]="
disabled(currentConfig.project_creation_restriction)
">
<option value="everyone">
{{ 'CONFIG.PRO_CREATION_EVERYONE' | translate }}
</option>
<option value="adminonly">
{{ 'CONFIG.PRO_CREATION_ADMIN' | translate }}
</option>
</select>
</clr-select-container>
<clr-input-container>
<label for="tokenExpiration" class="required"
>{{ 'CONFIG.TOKEN_EXPIRATION' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.TOKEN_EXPIRATION' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<input
clrInput
name="tokenExpiration"
type="number"
#tokenExpirationInput="ngModel"
[(ngModel)]="currentConfig.token_expiration.value"
required
pattern="^[1-9]{1}[0-9]*$"
id="tokenExpiration"
max="9999999999"
[disabled]="!editable" />
<clr-control-error>{{
'TOOLTIP.NUMBER_REQUIRED' | translate
}}</clr-control-error>
</clr-input-container>
<clr-input-container>
<label for="sessionTimeout" class="required"
>{{ 'CONFIG.SESSION_TIMEOUT' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.SESSION_TIMEOUT_INFO' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<input
clrInput
name="sessionTimeout"
type="number"
#ngSessionTimeout="ngModel"
[(ngModel)]="currentConfig.session_timeout.value"
required
pattern="^[1-9]{1}[0-9]*$"
id="sessionTimeout"
max="9999999999"
[disabled]="!editable" />
<clr-control-error>{{
'TOOLTIP.NUMBER_REQUIRED' | translate
}}</clr-control-error>
</clr-input-container>
<clr-input-container>
<label for="robotNamePrefix" class="required"
>{{ 'ROBOT_ACCOUNT.NAME_PREFIX' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.ROBOT_NAME_PREFIX' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<input
clrInput
name="robotNamePrefix"
type="text"
[(ngModel)]="currentConfig.robot_name_prefix.value"
required
autocomplete="off"
id="robotNamePrefix"
size="20"
[disabled]="!robotNamePrefixEditable()" />
<clr-control-error>{{
'ROBOT_ACCOUNT.NAME_PREFIX_REQUIRED' | translate
}}</clr-control-error>
</clr-input-container>
<clr-input-container>
<label for="robotTokenExpiration" class="required"
>{{ 'ROBOT_ACCOUNT.TOKEN_EXPIRATION' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.ROBOT_TOKEN_EXPIRATION' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<input
clrInput
name="robotTokenExpiration"
type="number"
#robotTokenExpirationInput="ngModel"
[(ngModel)]="currentConfig.robot_token_duration.value"
required
pattern="^[1-9]{1}[0-9]*$"
id="robotTokenExpiration"
max="9999999999"
[disabled]="!robotExpirationEditable" />
<clr-control-error>{{
'ROBOT_ACCOUNT.NUMBER_REQUIRED' | translate
}}</clr-control-error>
</clr-input-container>
<div *ngIf="canDownloadCert" class="clr-form-control">
<label class="clr-control-label"
>{{ 'CONFIG.ROOT_CERT' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.ROOT_CERT_DOWNLOAD' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<div class="clr-control-container cert-down">
<a
rel="noopener noreferrer"
[href]="downloadLink"
target="_blank"
>{{ 'CONFIG.ROOT_CERT_LINK' | translate }}</a
>
</div>
</div>
<clr-checkbox-container class="center">
<label id="repo_read_only_lbl" for="repoReadOnly"
>{{ 'CONFIG.REPO_READ_ONLY' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<clr-checkbox-wrapper>
<input
type="checkbox"
[disabled]="!currentConfig.read_only.editable"
clrCheckbox
name="repoReadOnly"
id="repoReadOnly"
[ngModel]="currentConfig.read_only.value"
(ngModelChange)="setRepoReadOnlyValue($event)" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
<clr-checkbox-container class="center">
<label for="webhookNotificationEnabled"
>{{ 'CONFIG.WEBHOOK_NOTIFICATION_ENABLED' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.WEBHOOK_TOOLTIP' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
name="webhookNotificationEnabled"
id="webhookNotificationEnabled"
[ngModel]="currentConfig.notification_enable.value"
(ngModelChange)="setWebhookNotificationEnabledValue($event)"
[disabled]="!currentConfig.notification_enable.editable" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
<clr-checkbox-container class="center">
<label for="scannerSkipUpdatePullTime"
>{{ 'CONFIG.SKIP_SCANNER_PULL_TIME' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CONFIG.TOOLTIP.SKIP_SCANNER_PULL_TIME_TOOLTIP'
| translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
name="scannerSkipUpdatePullTime"
id="scannerSkipUpdatePullTime"
[(ngModel)]="
currentConfig.scanner_skip_update_pulltime.value
"
[disabled]="
!currentConfig.scanner_skip_update_pulltime.editable
" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
<clr-input-container>
<label for="auditLogForwardEndpoint">
{{ 'CLEARANCES.FORWARD_ENDPOINT' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CLEARANCES.FORWARD_ENDPOINT_TOOLTIP' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<input
clrInput
name="auditLogForwardEndpoint"
type="text"
[(ngModel)]="currentConfig.audit_log_forward_endpoint.value"
id="auditLogForwardEndpoint"
size="20"
(input)="checkAuditLogForwardEndpoint($event)"
[disabled]="
!currentConfig?.audit_log_forward_endpoint?.editable
" />
</clr-input-container>
<clr-checkbox-container class="center">
<label for="skipAuditLogDatabase"
>{{ 'CLEARANCES.SKIP_DATABASE' | translate }}
<clr-tooltip>
<clr-icon
clrTooltipTrigger
shape="info-circle"
size="24"></clr-icon>
<clr-tooltip-content
clrPosition="top-right"
clrSize="lg"
*clrIfOpen>
<span>{{
'CLEARANCES.SKIP_DATABASE_TOOLTIP' | translate
}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
name="skipAuditLogDatabase"
id="skipAuditLogDatabase"
[(ngModel)]="currentConfig.skip_audit_log_database.value"
[disabled]="
!currentConfig.skip_audit_log_database?.editable ||
!currentConfig.audit_log_forward_endpoint?.value
" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
<div class="clr-form-control">
<label class="clr-control-label">{{
'BANNER_MESSAGE.BANNER_MESSAGE' | translate
}}</label>
<div class="clr-control-container flex-baseline">
<div class="clr-textarea-wrapper">
<textarea
id="banner-message"
placeholder="{{
'BANNER_MESSAGE.ENTER_MESSAGE' | translate
}}"
autocomplete="off"
class="clr-textarea"
[(ngModel)]="messageText"
[ngModelOptions]="{ standalone: true }"
[disabled]="
!currentConfig.banner_message.editable
"></textarea>
</div>
<div class="message-type">
<div
class="clr-select-wrapper"
[ngClass]="{
'clr-form-control-disable':
!currentConfig.banner_message.editable ||
!messageText
}">
<label class="message-label">{{
'BANNER_MESSAGE.MESSAGE_TYPE' | translate
}}</label>
<select
id="banner-message-type"
class="clr-select message-select"
[(ngModel)]="messageType"
[ngModelOptions]="{ standalone: true }"
[disabled]="
!currentConfig.banner_message.editable ||
!messageText
">
<option
*ngFor="let t of bannerMessageTypes"
value="{{ t }}">
{{ translateMessageType(t) | translate }}
</option>
</select>
</div>
</div>
<div
class="clr-checkbox-wrapper ml-1"
[ngClass]="{
'clr-form-control-disable':
!currentConfig.banner_message.editable ||
!messageText
}">
<input
class="clr-checkbox-inline"
type="checkbox"
[(ngModel)]="messageClosable"
[ngModelOptions]="{ standalone: true }"
[disabled]="
!currentConfig.banner_message.editable ||
!messageText
"
id="banner-message-closable" />
<label
class="clr-control-label"
for="banner-message-closable"
>{{ 'BANNER_MESSAGE.CLOSABLE' | translate }}</label
>
</div>
</div>
</div>
<div class="clr-form-control">
<label class="clr-control-label"></label>
<div class="clr-control-container flex-baseline">
<div class="clr-textarea-wrapper duration">
<label>{{ 'REPLICATION.DURATION' | translate }}</label>
</div>
<div
class="clr-input-wrapper flex message-type"
[ngClass]="{
'clr-form-control-disable':
!currentConfig.banner_message.editable ||
!messageText
}">
<label>{{ 'BANNER_MESSAGE.FROM' | translate }}</label>
<input
class="date"
type="date"
id="from"
clrDate
[(ngModel)]="messageFromDate"
[ngModelOptions]="{ standalone: true }"
[disabled]="
!currentConfig.banner_message.editable ||
!messageText
" />
</div>
<div
class="clr-checkbox-wrapper flex ml-1"
[ngClass]="{
'clr-form-control-disable':
!currentConfig.banner_message.editable ||
!messageText
}">
<label>{{ 'BANNER_MESSAGE.TO' | translate }}</label>
<input
class="date"
clrDate
type="date"
id="to"
[(ngModel)]="messageToDate"
[disabled]="
!currentConfig.banner_message.editable ||
!messageText
"
[ngModelOptions]="{ standalone: true }" />
</div>
</div>
</div>
</section>
</form>
<div>
<button
type="button"
id="config_system_save"
class="btn btn-primary"
(click)="save()"
[disabled]="!isValid() || !hasChanges() || inProgress">
{{ 'BUTTON.SAVE' | translate }}
</button>
<button
type="button"
id="config_system_cancel"
class="btn btn-outline"
(click)="cancel()"
[disabled]="!isValid() || !hasChanges() || inProgress">
{{ 'BUTTON.CANCEL' | translate }}
</button>
</div>