i18n>No items added.</span>
<button (click)="addInitiator(); false"
- class="btn btn-light float-end">
+ class="btn btn-light float-end"
+ type="button">
<svg [cdsIcon]="icons.add"
[size]="icons.size16"
></svg>
i18n>No items added.</span>
<button (click)="addGroup(); false"
- class="btn btn-light float-end">
+ class="btn btn-light float-end"
+ type="button">
<svg [cdsIcon]="icons.add"
[size]="icons.size16"
></svg>
<div class="form-group row">
<div class="col-sm-12">
<label class="col-form-label"
+ for="backstore"
i18n>Backstore</label>
<select id="backstore"
name="backstore"
@for (sub of connectedSubsystems; track sub.nqn) {
<div class="cds--mb-04">
<a class="cds--link cds--type-body-01"
- (click)="navigateToSubsystem(sub.nqn)">
+ tabindex="0"
+ (click)="navigateToSubsystem(sub.nqn)"
+ (keydown.enter)="navigateToSubsystem(sub.nqn)">
<span class="cds--mr-03">{{ sub.nqn }}</span>
<cd-icon type="launch"></cd-icon>
</a>
<div cdsCol>
<div class="cds--stack cds--stack-horizontal">
<label class="cds--type-label-01"
+ for="enableEncryption"
i18n>Enable encryption</label>
<cds-tag type="green"
size="sm"
<div cdsRow class="form-item">
<div cdsCol>
<div class="cds--stack cds--stack-horizontal cds-mb-3">
- <label class="cds--type-label-01" i18n>Enable Mutual TLS (mTLS)</label>
+ <label class="cds--type-label-01" for="enableMtls" i18n>Enable Mutual TLS (mTLS)</label>
</div>
<cds-checkbox id="enableMtls" formControlName="enableMtls">
<span
@if (groupForm.controls.enableMtls.value) {
<div cdsRow class="form-item">
<div cdsCol>
- <label class="cds--label fw-bold"
+ <label class="cds--label fw-bold" for="certificateType"
i18n>Choose Certificate Authority</label>
<cds-radio-group
formControlName="certificateType"
<div class="form-item">
<label
+ for="rbd_image_name"
class="cds--type-label-01"
i18n>Image name (optional)</label>
<cds-text-label
<a cdsLink
class="cds-ml-2"
(click)="openEditAuthModal()"
+ (keydown.enter)="openEditAuthModal()"
[cdsStack]="'horizontal'"
+ tabindex="0"
[gap]="1">
<span i18n>Edit</span>
<cd-icon type="edit"></cd-icon>
<span>{{ detail.value ? 'Allow all hosts' : 'Restrict to specific hosts' }}</span>
<a cdsLink
(click)="openEditHostAccessModal()"
+ (keydown.enter)="openEditHostAccessModal()"
[cdsStack]="'horizontal'"
class="cds-ml-2"
+ tabindex="0"
[gap]="1">
<span i18n>Edit</span>
<cd-icon type="edit"></cd-icon>
[disabled]="host.isInvalid"
size="md"
class="cds-mt-3"
+ type="button"
(click)="addHost()">
<span i18n>Add</span>
<cd-icon type="add"></cd-icon>
<button
i18n
cdsButton="ghost"
+ type="button"
(click)="removeAll($event)">
Remove all
</button>
<div *ngFor="let section of rbdConfigurationService.sections">
<h5 class="cd-header">
<legend (click)="toggleSectionVisibility(section.class)"
- class="collapsible">
+ class="collapsible"
+ tabindex="0"
+ (keydown.enter)="toggleSectionVisibility(section.class)">
{{ section.heading }}
<svg [cdsIcon]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
[size]="icons.size20"
<!-- Permissions -->
<div class="form-item">
<fieldset>
- <label class="cds--label"
- i18n>Permissions</label>
+ <legend class="cds--label"
+ i18n>Permissions</legend>
<ng-container *ngFor="let permission of clientPermissions">
<cds-checkbox i18n-label
[id]="permission.name"
let-row="data.row"
let-value="data.value">
<span class="quota-origin"
+ tabindex="0"
+ (keydown.enter)="selectOrigin(value)"
(click)="selectOrigin(value)">{{value}}</span>
</ng-template>
i18n>Turn on CephFS Mirroring to start creating mirror links and synchronizing data across clusters. After enabling, you can add mirror links.</p>
<button cdsButton="primary"
(click)="enableModule()"
+ type="button"
i18n>Enable CephFS Mirroring</button>
</cds-tile>
<div cdsGrid
cdsRow
class="form-item"
>
- <label
+ <legend
class="cds--label"
i18n
- >Description</label>
+ >Description</legend>
<p class="cds--type-body-01 mb-0">{{ response.long_desc }}</p>
</div>
}
cdsCol
[columnNumbers]="{ sm: 2, md: 2, lg: 2 }"
>
- <label
+ <legend
class="cds--label mb-0"
i18n
- >Services</label>
+ >Services</legend>
</div>
<div
cdsCol
id="skipStepBtn"
(click)="onSkip()"
aria-label="Skip this step"
+ type="button"
i18n>Skip</button>
</div>
</div>
class="me-3"
(click)="createCluster()"
aria-label="Add Storage"
+ type="button"
i18n>
Add storage
<cd-icon
<button cdsButton="tertiary"
(click)="skipClusterCreation()"
aria-label="View cluster overview"
+ type="button"
i18n>
View cluster overview
<cd-icon
</div>
<div class="col-md-5">
- <label i18n
- class="fw-bold">Time range:</label>
+ <legend i18n
+ class="cds--label fw-bold">Time range:</legend>
<div class="d-flex">
<ngb-timepicker [spinners]="false"
[(ngModel)]="startTime"
*ngIf="managedByConfig['MANAGED_BY_CLUSTERS'].length === 0">
<div class="text-center">
<button class="btn btn-primary"
- (click)="openConnectClusterForm()">
+ (click)="openConnectClusterForm()"
+ type="button">
<i class="mx-auto"
[ngClass]="icons.add">
</i> Connect Cluster
<cds-button-set>
<button cdsButton="secondary"
(click)="closeModal()"
+ type="button"
i18n>
Cancel
</button>
<button cdsButton="secondary"
(click)="resetSelection()"
+ type="button"
i18n>
Reset
</button>
<cds-button-set>
<button cdsButton="secondary"
(click)="closeModal()"
+ type="button"
i18n>
Cancel
</button>
<div class="col-sm-12">
<a class="pull-right margin-right-md"
(click)="advancedEnabled = true"
+ (keydown.enter)="advancedEnabled = true"
*ngIf="!advancedEnabled"
- i18n>Advanced...</a>
+ i18n
+ tabindex="0">Advanced...</a>
</div>
</div>
<div *ngIf="advancedEnabled">
spacingClass="mb-3"
i18n>
<a class="text-decoration-underline"
+ tabindex="0"
+ (keydown.enter)="createMultisiteSetup()"
(click)="createMultisiteSetup()">
Click here</a> to create a new Realm/Zonegroup/Zone
</cd-alert-panel>
<div class="form-item">
<fieldset class="cds--fieldset">
<label class="cds--label"
+ for="enable_mtls"
i18n>Encryption</label>
<cds-checkbox i18n-label
id="enable_mtls"
<!-- Current Certificate Section - Only shown in Edit mode when certificate exists -->
@if (editing && currentCertificate?.has_certificate) {
<div class="form-item">
- <label class="cds--label cds--type-heading-compact-01"
- i18n>Current Certificate</label>
+ <legend class="cds--label cds--type-heading-compact-01"
+ i18n>Current Certificate</legend>
<div class="row">
<div class="col-6">
- <label class="cds--label"
- i18n>Certificate</label>
+ <legend class="cds--label"
+ i18n>Certificate</legend>
<div>{{ currentCertificate.cert_name }}</div>
</div>
<div class="col-6">
- <label class="cds--label"
- i18n>Valid Until</label>
+ <legend class="cds--label"
+ i18n>Valid Until</legend>
<div>{{ currentCertificate.expiry_date | cdDate }} • {{ currentCertificate.days_to_expiration }} <span i18n>days left</span></div>
</div>
</div>
<div class="row mt-3">
<div class="col-6">
- <label class="cds--label"
- i18n>Status</label>
+ <legend class="cds--label"
+ i18n>Status</legend>
<div class="align-items-center">
<cd-icon [type]="statusIconMap[currentCertificate.status] || statusIconMap['default']"></cd-icon>
@switch (currentCertificate.status) {
</div>
</div>
<div class="col-6">
- <label class="cds--label"
- i18n>Issuer</label>
+ <legend class="cds--label"
+ i18n>Issuer</legend>
<div>
@if (currentCertificate.signed_by === 'cephadm') {
<span i18n>Internal (Cephadm CA)</span>
<!-- Certificate Authority Selection -->
<div class="form-item">
<label class="cds--label cds--type-heading-compact-01"
+ for="certificateType"
i18n>Choose Certificate Authority</label>
<cds-radio-group formControlName="certificateType"
orientation="horizontal"
<button class="btn btn-light"
aria-label="Go back"
routerLink="/upgrade"
+ type="button"
i18n>Back</button>
<button *ngIf="upgradeStatus.in_progress && !upgradeStatus.is_paused"
(click)="pauseUpgrade()"
class="btn btn-light m-2"
aria-label="Pause Upgrade"
+ type="button"
i18n>Pause</button>
<button *ngIf="upgradeStatus.in_progress && upgradeStatus.is_paused"
(click)="resumeUpgrade()"
class="btn btn-light m-2"
aria-label="Resume Upgrade"
+ type="button"
i18n>Resume</button>
<button *ngIf="upgradeStatus.in_progress"
(click)="stopUpgradeModal()"
class="btn btn-danger"
aria-label="Stop Upgrade"
+ type="button"
i18n>Stop</button>
</div>
</ng-container>
aria-label="Upgrade now"
(click)="upgradeNow(info.versions[info.versions.length - 1])"
[disabled]="(healthData.mgr_map | mgrSummary)?.total <= 1"
+ type="button"
i18n>Upgrade to {{ info.versions[info.versions.length - 1] }}</button>
</div>
<a class="cds--link cds-mb-3"
(click)="startUpgradeModal()"
+ tabindex="0"
+ (keydown.enter)="startUpgradeModal()"
i18n>Select another version...</a>
</ng-container>
</div>
</span>
<a class="cds--link cds-mb-3"
(click)="startUpgradeModal()"
+ tabindex="0"
+ (keydown.enter)="startUpgradeModal()"
i18n>Upgrade using custom image...</a>
</ng-template>
id="upgrade"
aria-label="Upgrade now"
[disabled]="true"
+ type="button"
i18n>Checking for upgrades
<cds-inline-loading></cds-inline-loading>
</button>
</span>
<a class="cds--link cds-mb-3"
(click)="startUpgradeModal()"
+ tabindex="0"
+ (keydown.enter)="startUpgradeModal()"
i18n>Upgrade using custom image...</a>
</div>
</ng-template>
cdsButton="ghost"
size="sm"
[routerLink]="['/monitoring/active-alerts']"
+ type="button"
i18n
>
View all
<button
cdsButton="tertiary"
size="sm"
+ type="button"
(click)="onViewPGStatesClick()">
<span
i18n
i18n
size="sm"
[routerLink]="['/add-storage']"
+ type="button"
>
Add storage
<cd-icon
<section cdsModalContent>
<form [formGroup]="zoneForm"
novalidate>
- <label class="cds--label-description"
+ <legend class="cds--label-description"
i18n>
This will delete your <strong>{{ zone?.name }}</strong> Zone.
- </label>
+ </legend>
@if (includedPools.size) {
- <label class="cds--label-description"
+ <legend class="cds--label-description"
i18n>
Do you want to delete the associated pools with the
<strong>{{ zone?.name }}</strong> Zone?
- </label>
- <label class="cds--label-description"
+ </legend>
+ <legend class="cds--label-description"
i18n>
This will delete the following pools and any data stored in these pools:
- </label>
+ </legend>
<div class="scroll-list">
@for (pool of includedPools; track pool) {
<form name="zonegroupForm"
[formGroup]="zonegroupForm"
novalidate>
- <label class="cds--label-description"
+ <legend class="cds--label-description"
i18n>
This will delete your <strong>{{ zonegroup?.name }}</strong> Zonegroup.
- </label>
+ </legend>
@if (zonesList.length > 0) {
<ng-container>
- <label class="cds--label-description"
+ <legend class="cds--label-description"
i18n>
Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zonegroup?
- </label>
+ </legend>
@if (includedPools.size > 0) {
<ng-container>
- <label class="cds--label-description"
+ <legend class="cds--label-description"
i18n>
This will delete the following:
- </label>
+ </legend>
</ng-container>
}
<button cdsButton="tertiary"
id="add-tag"
[disabled]="tags.length > 19"
- (click)="showTagModal()">
+ (click)="showTagModal()"
+ type="button">
<ng-container i18n>Add tag</ng-container>
<svg [cdsIcon]="icons.add"
[size]="icons.size16"
<button cdsButton="tertiary"
id="example-generator-button"
(click)="openUrl('https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html?icmpid=docs_amazons3_console')"
+ type="button"
i18n>Policy examples
<svg [cdsIcon]="icons.launch"
[size]="icons.size16"
<button cdsButton="tertiary"
id="example-generator-button"
(click)="openUrl('https://awspolicygen.s3.amazonaws.com/policygen.html')"
+ type="button"
i18n>Policy generator
<svg [cdsIcon]="icons.launch"
[size]="icons.size16"
<button cdsButton="tertiary"
id="clear-bucket-policy"
(click)="clearTextArea('bucket_policy', '{}')"
+ type="button"
i18n>Clear
<svg [cdsIcon]="icons.destroy"
[size]="icons.size16"
<button cdsButton="tertiary"
id="lifecycle-examples-button"
(click)="openUrl('https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-lifecycle.html#examples')"
+ type="button"
i18n>Policy examples
<svg [cdsIcon]="icons.launch"
[size]="icons.size16"
<button cdsButton="tertiary"
id="clear-lifecycle"
(click)="clearTextArea('lifecycle', '{}')"
+ type="button"
i18n>Clear
<svg [cdsIcon]="icons.destroy"
[size]="icons.size16"
name="skip-cluster-selection"
aria-label="Skip"
(click)="onSkip()"
+ type="button"
*ngIf="stepTitles[currentStep.stepIndex]['label'] === 'Select Cluster' && multisiteSetupForm.get('configType').value === 'newRealm'"
i18n>Skip</button>
<button cdsButton="secondary"
(click)="onPreviousStep()"
[attr.aria-label]="showCancelButtonLabel()"
+ type="button"
i18n>{{ showCancelButtonLabel() }}</button>
<button cdsButton="primary"
(click)="onNextStep()"
aria-label="Next"
[disabled]="loading"
+ type="button"
i18n>{{ showSubmitButtonLabel() }}
<cds-loading [isActive]="loading"
[overlay]="false"
<ng-template #newRealmInfo>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Realm Name:</label>
+ <legend class="cd-col-form-label"
+ i18n>Realm Name:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b id="realmName">{{ multisiteSetupForm.get('realmName').value }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Zonegroup Name:</label>
+ <legend class="cd-col-form-label"
+ i18n>Zonegroup Name:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b id="zonegroupName">{{ multisiteSetupForm.get('zonegroupName').value }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Zonegroup Endpoints:</label>
+ <legend class="cd-col-form-label"
+ i18n>Zonegroup Endpoints:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ rgwEndpoints.value.join(', ') }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Zone Name:</label>
+ <legend class="cd-col-form-label"
+ i18n>Zone Name:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b id="zoneName">{{ multisiteSetupForm.get('zoneName').value }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Zone Endpoints:</label>
+ <legend class="cd-col-form-label"
+ i18n>Zone Endpoints:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ rgwEndpoints.value.join(', ') }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Username:</label>
+ <legend class="cd-col-form-label"
+ i18n>Username:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ multisiteSetupForm.get('username').value }}</b></div>
</div>
</ng-template>
<ng-template #existingRealmInfo>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Selected Realm:</label>
+ <legend class="cd-col-form-label"
+ i18n>Selected Realm:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ multisiteSetupForm.get('selectedRealm').value }}</b></div>
</div>
</ng-template>
<ng-template #replicationInfo>
<div *ngIf="isMultiClusterConfigured && !stepsToSkip['Select Cluster']">
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Selected Replication Cluster:</label>
+ <legend class="cd-col-form-label"
+ i18n>Selected Replication Cluster:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ selectedCluster }}</b></div>
</div>
<div class="form-group row">
- <label class="cd-col-form-label"
- i18n>Replication Zone Name:</label>
+ <legend class="cd-col-form-label"
+ i18n>Replication Zone Name:</legend>
<div class="cd-col-form-input mt-2 text-muted"><b>{{ multisiteSetupForm.get('replicationZoneName').value }}</b></div>
</div>
</div>
<span class="float-end clickable"
name="remove_placement_target"
(click)="removePlacementTarget(index)"
+ tabindex="0"
+ (keydown.enter)="removePlacementTarget(index)"
ngbTooltip="Remove">×</span>
</div>
/>
<button type="button"
class="btn btn-light"
- cdPasswordButton="access_key"></button>
+ cdPasswordButton="access_key"
+ aria-label="Toggle access key visibility"
+ i18n-aria-label></button>
<cd-copy-2-clipboard-button source="access_key"> </cd-copy-2-clipboard-button>
</div>
</td>
<button cdsButton="tertiary"
id="example-generator-button"
(click)="openUrl('https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html?icmpid=docs_amazons3_console')"
+ type="button"
i18n>
Policy examples
<svg cdsIcon="launch"
</button>
<button cdsButton="tertiary"
id="example-generator-button"
+ type="button"
(click)="openUrl('https://awspolicygen.s3.amazonaws.com/policygen.html')"
i18n>
Policy generator
<cds-button-set class="float-end mt-1">
<button cdsButton="tertiary"
id="clear-bucket-policy"
+ type="button"
(click)="clearTextArea('policy', '{}')"
i18n>
Clear
autocomplete="new-password"
autofocus>
<button class="btn btn-outline-light btn-password"
- cdPasswordButton="oldpassword">
+ cdPasswordButton="oldpassword"
+ type="button">
</button>
</div>
<span class="invalid-feedback"
id="confirmnewpassword"
formControlName="confirmnewpassword">
<button class="btn btn-outline-light btn-password"
- cdPasswordButton="confirmnewpassword">
+ cdPasswordButton="confirmnewpassword"
+ type="button">
</button>
</div>
<span class="invalid-feedback"
<button class="btn btn-primary ms-1"
[routerLink]="buttonRoute"
*ngIf="!uiConfig; else configureButtonTpl"
+ type="button"
i18n>{{ buttonName }}</button>
<button class="btn btn-light ms-1"
[routerLink]="secondaryButtonRoute"
*ngIf="secondaryButtonName && secondaryButtonRoute"
+ type="button"
i18n>{{ secondaryButtonName }}</button>
</div>
</div>
<button class="btn btn-primary"
(click)="doConfigure()"
[attr.title]="buttonTitle"
+ type="button"
*ngIf="uiConfig"
i18n>{{ buttonName }}</button>
</ng-template>
*ngIf="!module_name; else enableButton">
<button class="btn btn-primary"
[routerLink]="'/overview'"
+ type="button"
i18n>Go To Overview</button>
</div>
</ng-template>
*ngIf="module_name && !(buttonName && buttonRoute)">
<button class="btn btn-primary"
(click)="enableModule()"
+ type="button"
i18n>Enable {{ module_name | upperFirst }} module</button>
</div>
</ng-template>
<main class="login full-height">
<header>
<nav class="navbar p-4">
- <a class="navbar-brand"></a>
<div class="form-inline">
<cd-language-selector></cd-language-selector>
</div>
<li class="cds--overflow-menu-options__option mb-2">
<button routerLink="/user-management"
class="cds--overflow-menu-options__btn"
+ type="button"
i18n>User management</button>
</li>
<li class="cds--overflow-menu-options__option mb-2"
*ngIf="configOptPermission.read">
<button routerLink="/telemetry"
class="cds--overflow-menu-options__btn"
+ type="button"
i18n>Telemetry configuration</button>
</li>
</cds-overflow-menu>
<button *ngIf="!sso"
routerLink="/user-profile/edit"
class="cds--overflow-menu-options__btn"
+ type="button"
i18n>
<svg cdsIcon="locked"
class="me-2"
<button (click)="logout()"
data-testid="logout"
class="cds--overflow-menu-options__btn"
+ type="button"
i18n><svg cdsIcon="logout"
class="me-2"
size="16"></svg>Log out
</cds-header-navigation>
<div class="cds--btn cds--btn--icon-only cds--header__action"
data-testid="header-notification-icon"
- (click)="onNotificationSelected($event)">
+ (click)="onNotificationSelected($event)"
+ tabindex="0"
+ (keydown.enter)="onNotificationSelected($event)">
<cd-notifications></cd-notifications>
</div>
<div class="cds--btn cds--btn--icon-only cds--header__action">
cdsButton="ghost"
size="sm"
class="notification-close"
- (click)="removeNotification(notification, $event)">
+ (click)="removeNotification(notification, $event)"
+ type="button">
<cd-icon type="destroy"></cd-icon>
</button>
</div>
class="notification-header__dismiss-btn"
i18n
cdsButton="ghost"
+ type="button"
size="sm"
(click)="onDismissAll()">
Dismiss all
[title]="actionName"
(click)="onAction()"
*ngIf="actionName"
+ type="button"
i18n>{{ actionName }}
</button>
</ng-template>
</span>
<span *ngIf="dropdownData && dropdownData.total.total.total > 0"
class="position-absolute end-0 me-2">
- <a (click)="toggleDropdown()"
- class="dropdown-toggle"
- [attr.aria-expanded]="dropdownToggled"
- aria-controls="row-dropdwon"
- role="button"></a>
+ <button type="button"
+ (click)="toggleDropdown()"
+ class="dropdown-toggle border-0 bg-transparent p-0"
+ [attr.aria-expanded]="dropdownToggled"
+ aria-controls="row-dropdown">
+ <span class="visually-hidden" i18n>Toggle dropdown</span>
+ </button>
</span>
</div>
</li>
[size]="size"
description="Copy to Clipboard"
i18n-description
+ type="button"
(click)="onClick()">
@if(text) {
<span data-toggle="tooltip"
@for (detail of getVisibleDetails(); track detail.label) {
<div [cdsStack]="'vertical'"
[gap]="2">
- <label class="cds--type-label-01">{{ detail.label }}</label>
+ <legend class="cds--type-label-01">{{ detail.label }}</legend>
<div class="cds--type-body-01">
@switch (detail.type) {
@case ('status') {
<div ngbDropdownMenu>
<button ngbDropdownItem
(click)="download('json')"
+ type="button"
*ngIf="objectItem">
<svg [cdsIcon]="icons.code"
size="16"
</button>
<button ngbDropdownItem
(click)="download()"
- *ngIf="textItem">
+ *ngIf="textItem"
+ type="button">
<svg [cdsIcon]="icons.document"
size="16"
></svg>
<button class="btn btn-light ms-3"
i18n-title
title="Reset Settings"
+ type="button"
(click)="reset()">
<i [ngClass]="[icons.undo]"></i>
</button>
<button class="btn btn-light ms-3"
i18n-title
title="Show hidden information"
+ type="button"
(click)="showMessage = !showMessage">
<i [ngClass]="[icons.infoCircle, icons.size24]"></i>
</button>
</div>
<cds-popover-content>
<div class="cds--popover-scroll-container"
- (click)="$event.stopPropagation()">
+ (click)="$event.stopPropagation()"
+ tabindex="0"
+ (keydown.enter)="$event.stopPropagation()">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</cds-popover-content>
<button class="inline-tip-bg-color btn-toggle"
cdsButton="ghost"
size="md"
- (click)="toggleContent()">
+ (click)="toggleContent()"
+ type="button">
<span i18n>{{ isTruncated ? 'Read more' : 'Read less' }}</span>
</button>
}
<div class="card-body p-1">
<button class="btn btn-link float-end mt-0 pt-0"
title="Remove notification"
+ type="button"
i18n-title
(click)="remove(i); $event.stopPropagation()">
<svg [cdsIcon]="icons.trash"
<button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && !notification.alertSilenced"
class="btn btn-link float-end text-muted mute m-0 p-0"
title="Silence Alert"
+ type="button"
i18n-title
(click)="silence(notification)">
<svg [cdsIcon]="icons.mute"
<button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && notification.alertSilenced"
class="btn btn-link float-end text-muted mute m-0 p-0"
title="Expire Silence"
+ type="button"
i18n-title
(click)="expire(notification)">
<svg [cdsIcon]="icons.bell"
<cds-tag class="tag-dark me-2">
<span class="me-2">{{ dataItem }}</span>
<a class="tags-remove"
- (click)="cdSelect.removeItem(dataItem)">
+ (click)="cdSelect.removeItem(dataItem)"
+ tabindex="0"
+ (keydown.enter)="cdSelect.removeItem(dataItem)">
<svg [cdsIcon]="icons.destroy"
[size]="icons.size20"
class="cds-white"></svg>
<div *ngFor="let option of filteredOptions"
class="select-menu-item"
[ngClass]="{'help-block disabled': (data.length === selectionLimit || !option.enabled) && !option.selected}"
- (click)="triggerSelection(option)">
+ (click)="triggerSelection(option)"
+ tabindex="0"
+ (keydown.enter)="triggerSelection(option)">
<div class="select-menu-item-icon">
<i [ngClass]="[icons.check]"
aria-hidden="true"
</div>
<div *ngIf="isCreatable()"
class="select-menu-item"
- (click)="addCustomOption()">
+ (click)="addCustomOption()"
+ tabindex="0"
+ (keydown.enter)="addCustomOption()">
<div class="select-menu-item-icon">
<i [ngClass]="[icons.tag]"
aria-hidden="true"></i>
<div class="overlay"
(click)="close()"
+ tabindex="0"
+ (keydown.enter)="close()"
*ngIf="expanded && overlay"></div>
<cds-panel [expanded]="expanded"
class="tearsheet-footer-cancel"
(click)="closeTearsheet()"
size="xl"
+ type="button"
i18n>Cancel</button>
@if (steps.length > 1) {
<button cdsButton="secondary"
size="xl"
[disabled]="currentStep === 0"
(click)="onPrevious()"
+ type="button"
i18n>Previous</button>
}
@if (currentStep === lastStep) {
class="tearsheet-footer-submit"
[disabled]="isSubmitLoading"
(click)="onSubmit()"
+ type="button"
i18n>
@if (isSubmitLoading) {
<cds-loading
<button cdsButton="primary"
size="xl"
[disabled]="steps[currentStep]?.invalid"
+ type="button"
(click)="onNext()"
i18n>Next</button>
}
<button cdsButton="ghost"
(click)="closeTearsheet()"
size="xl"
+ type="button"
i18n>Cancel</button>
@if (steps.length > 1) {
<button cdsButton="secondary"
size="xl"
[disabled]="currentStep === 0"
(click)="onPrevious()"
+ type="button"
i18n>Previous</button>
}
@if (currentStep === lastStep) {
class="tearsheet-footer-submit"
[disabled]="isSubmitLoading"
(click)="onSubmit()"
+ type="button"
i18n>
@if (isSubmitLoading) {
<cds-loading
size="xl"
[disabled]="steps[currentStep]?.invalid"
(click)="onNext()"
+ type="button"
i18n>Next</button>
}
</cds-modal-footer>
<div *ngIf="upgradeInfo$ | async as info"
i18n>
<h5 *ngIf="info.versions.length > 0"
- (click)="upgradeModal()">
+ (click)="upgradeModal()"
+ tabindex="0"
+ (keydown.enter)="upgradeModal()">
<i [ngClass]="icons.up"></i>
Upgrade available
</h5>
<a class="nav-link"
[class.active]="!activeItem"
(click)="selectItem()"
+ tabindex="0"
+ (keydown.enter)="selectItem()"
*ngIf="item === ''">_nogroup</a>
<a class="nav-link text-decoration-none text-break"
[class.active]="item === activeItem"
(click)="selectItem(item)"
+ tabindex="0"
+ (keydown.enter)="selectItem(item)"
*ngIf="item !== ''">{{item}}</a>
</li>
</ul>
[attr.aria-label]="dropDownOnly"
[offset]="{ x: -210, y: 65 }"
[cdsOverflowMenu]="overflowMenuTpl"
- data-testid="table-action-btn">
+ data-testid="table-action-btn"
+ type="button">
<svg
[cdsIcon]="icons.chevronDown"></svg>
</button>
<ng-template #caret>
<button [cdsButton]="currentAction.buttonKind"
- class="caret-btn">
+ class="caret-btn"
+ type="button">
<svg class="cds--btn__icon"
[cdsIcon]="icons.chevronDown"></svg>
</button>
</ng-template>
<ng-template #customTrigger>
- <button [cdsButton]="dropDownOnlyBtnColor">
+ <button [cdsButton]="dropDownOnlyBtnColor"
+ type="button">
<span i18n>{{ dropDownOnly }}</span>
<svg class="override-position-static cds--btn__icon"
[cdsIcon]="icons.chevronDown"></svg>
i18n-aria-label
[disabled]="!canPrevious()"
(click)="selectPage(1)"
+ type="button"
>
<cd-icon type="angleDoubleLeft"></cd-icon>
</button>
aria-label="Go to previous page"
i18n-aria-label
[disabled]="!canPrevious()"
+ type="button"
(click)="prevPage()"
>
<cd-icon type="leftArrow"></cd-icon>
i18n-aria-label
(click)="nextPage()"
[disabled]="!canNext()"
+ type="button"
>
<cd-icon type="rightArrow"></cd-icon>
</button>
i18n-aria-label
[disabled]="!canNext()"
(click)="selectPage(totalPages)"
+ type="button"
>
<cd-icon type="angleDoubleRight"></cd-icon>
</button>
[preserveFragment]="action.preserveFragment ? '' : null"
[disabled]="tableActions.disableSelectionAction(action)"
[attr.aria-label]="action.name"
+ type="button"
i18n>
{{ action.name }}
</button>
<button
cdsButton="tertiary"
size="md"
+ type="button"
(click)="addCustomFilter()">Add new filter rule +</button>
</div>
</div>
<button cdsButton="secondary"
size="lg"
data-testid="clear-filters"
+ type="button"
(click)="onClearFilters()">
<ng-container i18n>Clear all</ng-container>
</button>
size="lg"
data-testid="apply-filters"
[disabled]="isApplyFilterDisabled"
+ type="button"
(click)="onSubmitFilter()">
<ng-container i18n>Apply</ng-container>
</button>
<!-- show hide columns -->
<button cdsButton="ghost"
class="toolbar-action"
+ type="button"
[cdsOverflowMenu]="showHideColumnsRef"
placement="bottom"
[flip]="true"
<ng-template #showHideColumnsRef>
<div class="vstack gap-3 p-3"
(click)="$event.stopPropagation()"
+ tabindex="0"
+ (keydown.enter)="$event.stopPropagation()"
[cdsTheme]="theme">
<ng-container *ngFor="let column of localColumns">
<cds-checkbox *ngIf="!column?.isInvisible"
</cds-tooltip>
}
<button cdsButton="ghost"
- (click)="onClearFilters($event)">
+ (click)="onClearFilters($event)"
+ type="button">
<ng-container i18n>Clear filters</ng-container>
</button>
</div>
projects / ceph.git / commitdiff