// Icons
import ChevronDown from '@carbon/icons/es/chevron--down/16';
import Close from '@carbon/icons/es/close/32';
-import AddFilled from '@carbon/icons/es/add--filled/32';
+import AddFilled from '@carbon/icons/es/add--filled/20';
import SubtractFilled from '@carbon/icons/es/subtract--filled/32';
import Reset from '@carbon/icons/es/reset/32';
+import SubtractAlt from '@carbon/icons/es/subtract--alt/20';
+import ProgressBarRound from '@carbon/icons/es/progress-bar--round/32';
@NgModule({
imports: [
})
export class BlockModule {
constructor(private iconService: IconService) {
- this.iconService.registerAll([ChevronDown, Close, AddFilled, SubtractFilled, Reset]);
+ this.iconService.registerAll([
+ ChevronDown,
+ Close,
+ AddFilled,
+ SubtractFilled,
+ Reset,
+ ProgressBarRound,
+ SubtractAlt
+ ]);
}
}
</cds-tree-view>
<ng-template #treeNodeTemplate
let-node>
- <i [class]="node?.cdIcon"></i>
+ {{node?.data?.cdIcon}}
+ <svg [cdsIcon]="node?.data?.cdIcon"
+ [size]="icons.size16"
+ ></svg>
<span>{{ node?.name }}</span>
<span class="badge"
id="ecp-info-button"
type="button"
(click)="targetSettingsModal()">
- <i [ngClass]="[icons.deepCheck]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.deepCheck"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
<button class="btn btn-light"
type="button"
(click)="removePortal(i, portal)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</ng-container>
[messages]="messages.portals"
(selection)="onPortalSelection($event)"
elemClass="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add portal</ng-container>
</cd-select>
</div>
<button class="btn btn-light"
type="button"
(click)="imageSettingsModal(image)">
- <i [ngClass]="[icons.deepCheck]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.deepCheck"
+ [size]="icons.size16"
+ ></svg>
</button>
<button class="btn btn-light"
type="button"
(click)="removeImage(i, image)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
[messages]="messages.images"
(selection)="onImageSelection($event)"
elemClass="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button class="btn btn-light"
type="button"
(click)="removeInitiatorImage(initiator, li, ii, image)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</ng-container>
[options]="imagesInitiatorSelections[ii]"
[messages]="messages.initiatorImage"
elemClass="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button (click)="addInitiator(); false"
class="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add initiator</ng-container>
</button>
</div>
<button class="btn btn-light"
type="button"
(click)="removeGroupInitiator(group, i, gi)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</ng-container>
[messages]="messages.groupInitiator"
(selection)="onGroupMemberSelection($event, gi)"
elemClass="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add initiator</ng-container>
</cd-select>
</div>
<button class="btn btn-light"
type="button"
(click)="removeGroupDisk(group, i, gi)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</ng-container>
[options]="groupDiskSelections[gi]"
[messages]="messages.initiatorImage"
elemClass="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button (click)="addGroup(); false"
class="btn btn-light float-end">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add group</ng-container>
</button>
</div>
<button class="btn btn-light"
type="button"
(click)="configureDiscoveryAuth()">
- <i [ngClass]="[icons.key]"
- aria-hidden="true">
- </i>
+ <svg [cdsIcon]="icons.key"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Discovery authentication</ng-container>
</button>
</div>
readonly>
</textarea>
</cds-textarea-label>
- <cd-copy-2-clipboard-button class="float-end"
- source="token">
+ <cd-copy-2-clipboard-button source="token">
</cd-copy-2-clipboard-button>
</div>
</form>
size="md"
(click)="updateSiteName()"
[title]="editing ? 'Save' : 'Edit'">
- <svg cdsIcon="edit"
- size="32"
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size32"
class="cds--btn__icon"
*ngIf="!editing"></svg>
- <svg cdsIcon="checkmark"
- size="32"
+ <svg [cdsIcon]="icons.check"
+ [size]="icons.size32"
class="cds--btn__icon"
*ngIf="editing"></svg>
</cds-icon-button>
|| initiatorForm.get('addHost.addedHosts').controls.length === 32
|| (initiatorForm.get('addHost.addedHosts').controls.length !== 1 && initiatorForm.get('addHost.addedHosts').controls.length !== hi+1)"
(click)="addHost()">
- <i class="fa fa-plus"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
</button>
<button class="btn btn-light"
type="button"
id="delete-button-{{hi}}"
[disabled]="addedHosts.controls.length === 1"
(click)="removeHost(hi)">
- <i class="fa fa-trash-o"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ ></svg>
</button>
<ng-container *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].invalid
&& (initiatorForm.get('addHost.addedHosts').controls[hi].dirty
<h5 class="cd-header">
<legend (click)="toggleSectionVisibility(section.class)"
class="collapsible">
- {{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
- aria-hidden="true"></i>
+ {{ section.heading }}
+ <svg [cdsIcon]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
+ [size]="icons.size20"
+ ></svg>
</legend>
</h5>
<div class="{{ section.class }}"
<ng-template #resetIcon>
<svg cdsIcon="reset"
size="32"
- class="cds--btn__icon"
*ngIf="form.get('configuration').get(option.name).disabled"></svg>
</ng-template>
</cds-icon-button>
let-column="data.column"
let-value="data.value"
let-row="data.row">
-
<i [ngClass]="[icons.spinner, icons.spin]"
*ngIf="row.cdExecuting"></i>
- <span [ngClass]="column?.customTemplateConfig?.valueClass">
+ <span [ngClass]="column?.customTemplateConfig?.valueClass">
{{ value }}
</span>
<span *ngIf="row.cdExecuting"
'text-muted italic'">
({{ row.cdExecuting }})
</span>
- <i *ngIf="row.source && row.source === 'REMOVING'"
- i18n-title
- title="RBD in status 'Removing'"
- class="{{ icons.warning }} warn"></i>
+ <svg *ngIf="row.source && row.source === 'REMOVING'"
+ i18n-title
+ title="RBD in status 'Removing'"
+ [cdsIcon]="icons.warning"
+ [size]="icons.size16"
+ class="cds-warning-color"></svg>
</ng-template>
<ng-template #forcePromoteConfirmation>
decimals="2">
</cd-usage-bar>
</ng-template>
-
</ng-template>
<ng-template #usageTooltip>
ModalModule,
TreeviewModule,
ListModule,
- ToggletipModule
+ ToggletipModule,
+ IconModule,
+ IconService
} from 'carbon-components-angular';
-
+import Analytics from '@carbon/icons/es/analytics/16';
+import CloseFilled from '@carbon/icons/es/close--filled/16';
+import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
import {
NgbActiveModal,
NgbDatepickerModule,
InputModule,
ModalModule,
ListModule,
- ToggletipModule
+ ToggletipModule,
+ IconModule
],
declarations: [
MonitorComponent,
],
providers: [NgbActiveModal]
})
-export class ClusterModule {}
+export class ClusterModule {
+ constructor(private iconService: IconService) {
+ this.iconService.registerAll([Analytics, CloseFilled, ProgressBarRoundIcon]);
+ }
+}
i18n>Keyword:</label>
<div class="input-group">
<span class="input-group-text">
- <i [ngClass]="[icons.search]"></i>
+ <svg [cdsIcon]="icons.search"
+ [size]="icons.size16"
+ ></svg>
</span>
<input class="form-control"
class="btn btn-light"
(click)="clearSearchKey()"
title="Clear">
- <i class="icon-prepend {{ icons.destroy }}"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</div>
class="btn btn-light"
(click)="clearDate()"
title="Clear">
- <i class="icon-prepend {{ icons.destroy }}"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ ></svg>
</button>
</div>
</div>
data-toggle="tooltip"
[title]="addButtonTooltip"
[disabled]="availDevices.length === 0 || !canSelect || expansionCanSelect">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add</ng-container>
</button>
</ng-container>
<a class="tc_clearSelections"
href=""
(click)="clearDevices(); false">
- <i [ngClass]="[icons.clearFilters]"></i>
+ <svg [cdsIcon]="icons.clearFilters"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Clear</ng-container>
</a>
</div>
}
),
disable: () => this.isNotSelectedOrInState('up'),
- icon: Icons.destroyCircle
+ icon: Icons.clearFilters
},
{
name: this.actionLabels.DELETE,
let-row="data.row"
let-value="data.value">
<a [href]="value"
- target="_blank"><i [ngClass]="[icons.lineChart]"></i> Source</a>
+ target="_blank">
+ <svg [cdsIcon]="icons.lineChart"
+ [size]="icons.size16"
+ >
+ </svg> Source
+ </a>
</ng-template>
i18n-ngbTooltip
ngbTooltip="Edit"
(click)="showMatcherModal(index)">
- <i [ngClass]="[icons.edit]"></i>
+ <svg
+ [cdsIcon]="icons.edit"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
<button type="button"
class="btn btn-light"
i18n-ngbTooltip
ngbTooltip="Delete"
(click)="deleteMatcher(index)">
- <i [ngClass]="[icons.trash]"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
<span class="help-block"></span>
class="btn btn-light float-end my-3"
[ngClass]="{'btn-warning': formDir.submitted && matchers.length === 0 }"
(click)="showMatcherModal()">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Add matcher</ng-container>
</button>
</div>
<b>{{ event.created | relativeDate }} - </b>
<span class="badge badge-info">{{ event.subject }}</span><br>
<span *ngIf="event.level === 'INFO'">
- <i [ngClass]="[icons.infoCircle]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.infoCircle"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</span>
<span *ngIf="event.level === 'ERROR'">
- <i [ngClass]="[icons.warning]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.warning"
+ [size]="icons.size16"
+ class="cds-warning-color"></svg>
</span>
{{ event.message }}
</li>
<span ngbTooltip="Service instances running out of the total number of services requested.">
{{ value.running }} / {{ value.size }}
</span>
- <i *ngIf="value.running == 0 || value.size == 0"
- class="icon-warning-color"
- [ngClass]="[icons.warning]">
- </i>
+ <svg *ngIf="value.running == 0 || value.size == 0"
+ [cdsIcon]="icons.warning"
+ [size]="icons.size16"
+ class="cds-warning-color"></svg>
</ng-template>
<ng-template #urlTpl
target="_blank"
[href]="serviceUrls[row.service_type]">
{{ row.service_name }}
- <i class="fa fa-external-link"></i>
+ <svg [cdsIcon]="icons.launch"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</a>
<ng-template #mgmtGateway>
<a target="_blank"
[href]="row.service_type">
{{ row.service_name }}
- <i class="fa fa-external-link"></i>
+ <svg [cdsIcon]="icons.launch"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</a>
</ng-template>
</ng-container>
i18n-ngbTooltip
type="button"
(click)="toggleDCalc()">
- <i [ngClass]="dCalc ? icons.unlock : icons.lock"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="dCalc ? icons.unlock : icons.lock"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
<span class="form-text text-muted"
[selectionLimit]="4"
(selection)="appSelection()">
</cd-select-badges>
- <i *ngIf="data.applications.selected <= 0"
- i18n-title
- title="Pools should be associated with an application tag"
- class="{{icons.warning}} icon-warning-color">
- </i>
+ <svg *ngIf="data.applications.selected <= 0"
+ [cdsIcon]="icons.warning"
+ [size]="icons.size20"
+ title="Pools should be associated with an application tag"
+ class="cds-warning-color"
+ i18n-title></svg>
<span class="invalid-feedback"
*ngIf="!isApplicationsSelected && data.applications.selected <= 0"
i18n>Application selection is required!</span>
</div>
<!-- CRUSH -->
<div *ngIf="isErasure || isReplicated">
-
<legend i18n>CRUSH</legend>
-
<!-- Erasure Profile select -->
<div class="form-group row"
*ngIf="isErasure">
id="ecp-info-button"
type="button"
(click)="data.erasureInfo = !data.erasureInfo">
- <i [ngClass]="[icons.questionCircle]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.questionCircle"
+ [size]="icons.size20"
+ class="cds-info-color "></svg>
</button>
<button class="btn btn-light"
type="button"
*ngIf="!editing"
(click)="addErasureCodeProfile()">
- <i [ngClass]="[icons.add]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size20"
+ class="cds-info-color "></svg>
</button>
<button class="btn btn-light"
type="button"
triggers="manual"
#ecpDeletionBtn="ngbTooltip"
(click)="deleteErasureCodeProfile()">
- <i [ngClass]="[icons.trash]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
<span class="form-text text-muted"
specify how CRUSH places data replicas."
i18n-ngbTooltip
(click)="data.crushInfo = !data.crushInfo">
- <i [ngClass]="[icons.questionCircle]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.questionCircle"
+ [size]="icons.size20"
+ class="cds-info-color"></svg>
</button>
<button class="btn btn-light"
type="button"
*ngIf="isReplicated && !editing"
(click)="addCrushRule()">
- <i [ngClass]="[icons.add]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
<button class="btn btn-light"
*ngIf="isReplicated && !editing"
triggers="manual"
#crushDeletionBtn="ngbTooltip"
(click)="deleteCrushRule()">
- <i [ngClass]="[icons.trash]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
import { PoolDetailsComponent } from './pool-details/pool-details.component';
import { PoolFormComponent } from './pool-form/pool-form.component';
import { PoolListComponent } from './pool-list/pool-list.component';
+import { IconModule, IconService } from 'carbon-components-angular';
+import HelpIcon from '@carbon/icons/es/help/16';
+import UnlockedIcon from '@carbon/icons/es/unlocked/16';
+import LockedIcon from '@carbon/icons/es/locked/16';
@NgModule({
imports: [
RouterModule,
ReactiveFormsModule,
NgbTooltipModule,
- BlockModule
+ BlockModule,
+ IconModule
],
exports: [PoolListComponent, PoolFormComponent],
declarations: [
PoolDetailsComponent
]
})
-export class PoolModule {}
+export class PoolModule {
+ constructor(private iconService: IconService) {
+ this.iconService.registerAll([HelpIcon, UnlockedIcon, LockedIcon]);
+ }
+}
const routes: Routes = [
{ path: '', component: PoolListComponent },
[disabled]="tags.length > 19"
(click)="showTagModal()">
<ng-container i18n>Add tag</ng-container>
- <svg cdsIcon="add"
- size="32"
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
</cds-tooltip>
id="example-generator-button"
(click)="openUrl('https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html?icmpid=docs_amazons3_console')"
i18n>Policy examples
- <svg cdsIcon="launch"
- size="16"
+ <svg [cdsIcon]="icons.launch"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
<button cdsButton="tertiary"
id="example-generator-button"
(click)="openUrl('https://awspolicygen.s3.amazonaws.com/policygen.html')"
i18n>Policy generator
- <svg cdsIcon="launch"
- size="16"
+ <svg [cdsIcon]="icons.launch"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
</cds-button-set>
id="clear-bucket-policy"
(click)="clearTextArea('bucket_policy', '{}')"
i18n>Clear
- <svg cdsIcon="close"
- size="32"
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
</cds-button-set>
id="lifecycle-examples-button"
(click)="openUrl('https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-lifecycle.html#examples')"
i18n>Policy examples
- <svg cdsIcon="launch"
- size="16"
+ <svg [cdsIcon]="icons.launch"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
</cds-button-set>
id="clear-lifecycle"
(click)="clearTextArea('lifecycle', '{}')"
i18n>Clear
- <svg cdsIcon="close"
- size="32"
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</button>
</cds-button-set>
<cds-icon-button kind="tertiary"
size="md"
(click)="showTagModal(index)">
- <svg cdsIcon="edit"
- size="32"
- class="cds--btn__icon"></svg>
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size16"
+ class="cds-info-color cds--btn__icon"></svg>
</cds-icon-button>
<cds-icon-button kind="danger"
size="md"
(click)="deleteTag(index)">
- <svg cdsIcon="trash-can"
- size="32"
- class="cds--btn__icon"></svg>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ class="cds-info-color cds--btn__icon"></svg>
</cds-icon-button>
</div>
</ng-template>
<span *ngIf="node?.data?.name"
class="me-3">
<span *ngIf="(node?.data?.show_warning)">
- <i class="text-danger"
- i18n-title
- [title]="node?.data?.warning_message"
- [ngClass]="icons.danger"></i>
+ <svg [cdsIcon]="icons.danger"
+ [size]="icons.size16"
+ [title]="node?.data?.warning_message"
+ class="cds-danger-color"></svg>
</span>
- <i [ngClass]="node?.data?.icon"></i>
+ <svg *ngIf="node?.data?.icon === 'scales'"
+ [cdsIcon]="icons.reweight"
+ [size]="icons.size20"
+ ></svg>
+ <svg *ngIf="node?.data?.icon === 'cube'"
+ [cdsIcon]="icons.deploy"
+ [size]="icons.size20"
+ ></svg>
+ <svg *ngIf="node?.data?.icon === 'fa fa-cubes'"
+ [cdsIcon]="icons.parentChild"
+ [size]="icons.size20"
+ ></svg>
{{ node?.data?.name }}
</span>
<span class="badge badge-success me-2"
class="btn btn-light dropdown-toggle-split ms-1"
(click)="openModal(node, true)"
[disabled]="getDisable() || node?.data?.secondary_zone">
- <i [ngClass]="[icons.edit]"></i>
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
<ng-container *ngIf="isDeleteDisabled(node) as nodeDeleteData">
class="btn btn-light ms-1"
[disabled]="nodeDeleteData.isDisabled || node?.data?.secondary_zone"
(click)="delete(node)">
- <i [ngClass]="[icons.destroy]"></i>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"
+ class="cds-info-color"></svg>
</button>
</div>
</ng-container>
[formGroup]="exportTokenForm">
<span *ngIf="loading"
class="d-flex justify-content-center">
- <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i></span>
+ <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
+ <svg [cdsIcon]="icons.down"
+ [size]="icons.size24"
+ class="cds-info-color"></svg>
+ </span>
<div class="modal-body"
*ngIf="!loading">
<cd-alert-panel *ngIf="!tokenValid"
[options]="zone.data.available"
(selection)="zoneSelection()">
</cd-select-badges>
- <i *ngIf="zone.data.selected.length <= 0"
- i18n-title
- title="Flow should be associated with {{name?.split('_').join(' ')}}"
- class="{{ icons.warning }} icon-warning-color">
- </i>
+
+ <svg *ngIf="zone.data.selected.length <= 0"
+ [cdsIcon]="icons.warning"
+ [size]="icons.size16"
+ title="Flow should be associated with {{name?.split('_').join(' ')}}"
+ class="cds-warning-color"
+ i18n-title></svg>
<span class="invalid-feedback"
*ngIf="currentFormGroupContext.showError(name, frm, 'required')"
i18n>{{name?.split('_').join(' ')}} selection is required!
[options]="zone.data.available"
(selection)="onZoneSelection(name)">
</cd-select-badges>
- <i *ngIf="zone.data.selected.length <= 0"
- i18n-title
- title="Pipe should be associated with {{ name?.split('_').join(' ') }}"
- class="{{ icons.warning }} icon-warning-color">
- </i>
+
+ <svg *ngIf="zone.data.selected.length <= 0"
+ i18n-title
+ [cdsIcon]="icons.warning"
+ [size]="icons.size16"
+ title="Pipe should be associated with {{ name?.split('_').join(' ') }}"
+ class="cds-warning-color"></svg>
<span class="invalid-feedback"
*ngIf="pipeForm.showError(name, frm, 'required')"
i18n>{{ name?.split('_').join(' ') }} selection is required!
id="add-plc"
class="btn btn-light float-end my-3"
(click)="addPlacementTarget()">
- <i [ngClass]="[icons.add]"></i>
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size16"
+ class="cds-info-color">
+ </svg>
<ng-container i18n>Add placement target</ng-container>
</button>
</div>
</ng-template>
<li><b>Status:</b></li>
<li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
- <i [ngClass]="[icons.danger]"
- class="text-danger"></i>
+ <svg [cdsIcon]="icons.danger"
+ [size]="icons.size16"
+ class="cds-danger-color"></svg>
<a class="lead text-danger"
i18n>Error</a>
</li>
</ng-template>
<li><b i18n>Status:</b></li>
<li *ngIf="metadataSyncInfo.syncstatus?.includes('failed') || metadataSyncInfo.syncstatus?.includes('error'); else showMetadataStatus">
- <i class="text-danger"
- [ngClass]="[icons.danger]"></i>
+ <svg [cdsIcon]="icons.danger"
+ [size]="icons.size16"
+ class="cds-danger-color"></svg>
<a class="lead text-danger"
i18n>Error</a>
</li>
<ul class="pb-5">
- <li><i [ngClass]="[icons.large2x, icons.reweight]"
- class="pt-2"></i></li>
+ <li>
+ <svg [cdsIcon]="icons.reweight"
+ [size]="icons.size20"
+ class="cds-icon--size-07"></svg>
+ </li>
<li class="badge badge-info mt-2">{{realm}}</li>
- <li><i [ngClass]="[icons.large2x, icons.down]"
- class="mt-2"></i></li>
- <li><i [ngClass]="[icons.large2x, icons.cubes]"
- class="mt-2"></i></li>
+ <li>
+ <svg [cdsIcon]="icons.down"
+ class=" cds-icon--size-07"></svg>
+ </li>
+ <li>
+ <i [ngClass]="[icons.large2x, icons.cubes]"
+ class="mt-2"></i>
+ </li>
<p class="badge badge-info mt-2">{{zonegroup}}</p>
- <li><i [ngClass]="[icons.large2x, icons.down]"
- class="mt-2"></i></li>
- <li><i [ngClass]="[icons.large2x, icons.deploy]"
- class="mt-2"></i></li>
+ <li>
+ <svg [cdsIcon]="icons.down"
+ class="cds-icon--size-07"></svg>
+ </li>
+ <li>
+ <svg [cdsIcon]="icons.deploy"
+ [size]="icons.size20"
+ class="cds-icon--size-07 cds-icon"></svg>
+ </li>
<li class="badge badge-info mt-2">{{zone}}</li>
</ul>
title="Edit"
class="mt-4 tc_showSubuserButton"
(click)="showSubuserModal(i)">
- <svg cdsIcon="edit"
- size="32"
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</cds-icon-button>
<cds-icon-button kind="danger"
title="Delete"
class="mt-4 tc_deleteSubuserButton"
(click)="deleteSubuser(i)">
- <svg cdsIcon="trash-can"
- size="32"
- class="cds--btn__icon"></svg>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size32"
+ class="cds--btn__icon">></svg>
</cds-icon-button>
</div>
</ng-container>
(click)="showSubuserModal()">
<ng-container i18n>{{ actionLabels.CREATE | titlecase }}
{{ subuserLabel | upperFirst }}</ng-container>
- <svg cdsIcon="add"
- size="32"
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</button>
</div>
<cds-icon-button kind="tertiary"
size="md"
title="Show"
+ i18n-title
class="mt-2 tc_showS3KeyButton"
(click)="showS3KeyModal(i)">
- <svg cdsIcon="view"
- size="16"
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</cds-icon-button>
<cds-icon-button kind="danger"
title="Delete"
class="mt-2 tc_deleteS3KeyButton"
(click)="deleteS3Key(i)">
- <svg cdsIcon="trash-can"
- size="32"
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</cds-icon-button>
</div>
(click)="showS3KeyModal()">
<ng-container i18n>{{ actionLabels.CREATE | titlecase }}
{{ s3keyLabel | upperFirst }}</ng-container>
- <svg cdsIcon="add"
- size="32"
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</button>
</div>
readonly>
</cds-text-label>
</div>
- <cds-icon-button kind="tertiary"
- size="md"
- title="Show"
- class="mt-2 tc_showSwiftKeyButton"
- (click)="showSwiftKeyModal(i)">
- <svg cdsIcon="view"
- size="16"
- class="cds--btn__icon"></svg>
- </cds-icon-button>
+ <cds-icon-button kind="tertiary"
+ size="md"
+ title="Show"
+ i18n-title
+ class="mt-2 tc_showSwiftKeyButton"
+ (click)="showSwiftKeyModal(i)">
+ <svg [cdsIcon]="icons.show"
+ [size]="icons.size16"
+ class="cds--btn__icon">
+ </svg>
+ </cds-icon-button>
</div>
</span>
</div>
title="Edit"
class="mt-4 tc_editCapButton"
(click)="showCapabilityModal(i)">
- <svg cdsIcon="edit"
- size="32"
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</cds-icon-button>
<cds-icon-button kind="danger"
title="Delete"
class="mt-4 tc_deleteCapButton"
(click)="deleteCapability(i)">
- <svg cdsIcon="trash-can"
- size="32"
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</cds-icon-button>
</div>
(click)="showCapabilityModal()">
<ng-container i18n>{{ actionLabels.ADD | titlecase }}
{{ capabilityLabel | upperFirst }}</ng-container>
- <svg cdsIcon="add"
- size="32"
+ <svg [cdsIcon]="icons.add"
+ [size]="icons.size32"
class="cds--btn__icon"></svg>
</button>
</div>
TagModule,
TooltipModule,
ComboBoxModule,
- ToggletipModule
+ ToggletipModule,
+ IconService
} from 'carbon-components-angular';
+import EditIcon from '@carbon/icons/es/edit/16';
+import ScalesIcon from '@carbon/icons/es/scales/20';
+import UserIcon from '@carbon/icons/es/user/16';
+import CubeIcon from '@carbon/icons/es/cube/20';
+import ShareIcon from '@carbon/icons/es/share/16';
+import ViewIcon from '@carbon/icons/es/view/16';
+import PasswordIcon from '@carbon/icons/es/password/16';
+import ArrowDownIcon from '@carbon/icons/es/arrow--down/16';
+import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
+import ToolsIcon from '@carbon/icons/es/tools/32';
+import ParentChild from '@carbon/icons/es/parent-child/20';
+
import { CephSharedModule } from '../shared/ceph-shared.module';
import { RgwUserAccountsComponent } from './rgw-user-accounts/rgw-user-accounts.component';
import { RgwUserAccountsFormComponent } from './rgw-user-accounts-form/rgw-user-accounts-form.component';
],
providers: [TitleCasePipe]
})
-export class RgwModule {}
+export class RgwModule {
+ constructor(private iconService: IconService) {
+ this.iconService.registerAll([
+ EditIcon,
+ ScalesIcon,
+ CubeIcon,
+ UserIcon,
+ ShareIcon,
+ ViewIcon,
+ PasswordIcon,
+ ArrowDownIcon,
+ ProgressBarRoundIcon,
+ ToolsIcon,
+ ParentChild
+ ]);
+ }
+}
const routes: Routes = [
{
<div class="row h-100 justify-content-center align-items-center">
<div class="blank-page">
<div *ngIf="header && message; else elseBlock">
- <i [ngClass]="icon"
- class="mx-auto d-block"></i>
-
+ <svg [cdsIcon]="icon"
+ class="cds-info-color cds-icon--size-10"></svg>
<div class="mt-4 text-center">
<h3><b>{{ header }}</b></h3>
<h4 class="mt-3"
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { DocService } from '~/app/shared/services/doc.service';
import { NotificationService } from '~/app/shared/services/notification.service';
+import { Icons } from '~/app/shared/enum/icons.enum';
@Component({
selector: 'cd-error',
buttonToEnableModule: string;
navigateTo: string;
component: string;
+ icons = Icons;
constructor(
private router: Router,
</h4>
<h4 *ngIf="cardType === 'zone'"
class="text-center mt-4 mb-0">
- <i [ngClass]="icons.deploy"></i>
+ <svg [cdsIcon]="icons.deploy"
+ [size]="icons.size20"
+ ></svg>
<span class="badge badge-info">{{ cardTitle }}</span>
</h4>
<h5 *ngIf="cardType === 'syncCards'"
ProgressIndicatorModule,
PanelModule
} from 'carbon-components-angular';
-
+import EditIcon from '@carbon/icons/es/edit/20';
+import CodeIcon from '@carbon/icons/es/code/16';
import { MotdComponent } from '~/app/shared/components/motd/motd.component';
import { DirectivesModule } from '../directives/directives.module';
import { PipesModule } from '../pipes/pipes.module';
// Icons
import InfoIcon from '@carbon/icons/es/information/16';
import CopyIcon from '@carbon/icons/es/copy/32';
+import downloadIcon from '@carbon/icons/es/download/16';
@NgModule({
imports: [
})
export class ComponentsModule {
constructor(private iconService: IconService) {
- this.iconService.registerAll([InfoIcon, CopyIcon]);
+ this.iconService.registerAll([InfoIcon, CopyIcon, EditIcon, CodeIcon, downloadIcon]);
}
}
-<i [ngClass]="[icons.clipboard, icons.large]"
- (click)="onClick()"
- class="text-primary ms-2"
- title="Copy to Clipboard"
- *ngIf="showIconOnly; else withButtonTpl"></i>
+
+<svg [cdsIcon]="icons.clipboard"
+ [size]="icons.size16"
+ (click)="onClick()"
+ class="text-primary ms-2"
+ title="Copy to Clipboard"
+ i18n-title
+ *ngIf="showIconOnly; else withButtonTpl"></svg>
<ng-template #withButtonTpl>
size="md"
title="Copy to Clipboard"
(click)="onClick()">
- <svg cdsIcon="copy"
- size="32"
+ <svg [cdsIcon]="icons.copy"
+ [size]="icons.size16"
class="cds--btn__icon"></svg>
</cds-icon-button>
</ng-template>
[title]="title"
class="btn btn-light dropdown-toggle-split"
ngbDropdownToggle>
- <i [ngClass]="[icons.download]"></i>
+ <svg [cdsIcon]="icons.download"
+ size="16"
+ ></svg>
</button>
<div ngbDropdownMenu>
<button ngbDropdownItem
(click)="download('json')"
*ngIf="objectItem">
- <i [ngClass]="[icons.json]"></i>
- <span>JSON</span>
+ <svg [cdsIcon]="icons.code"
+ size="16"
+ ></svg>
+ <span> JSON</span>
</button>
<button ngbDropdownItem
(click)="download()"
*ngIf="textItem">
- <i [ngClass]="[icons.text]"></i>
- <span>Text</span>
+ <svg [cdsIcon]="icons.document"
+ size="16"
+ ></svg>
+ <span> Text</span>
</button>
</div>
</div>
<div class="card tc_task border-0">
<div class="row no-gutters">
<div class="col-md-2 text-center">
- <span [ngClass]="[icons.stack, icons.large2x]"
- class="text-info">
- <i [ngClass]="[icons.stack2x, icons.circle]"></i>
- <i [ngClass]="[icons.stack1x, icons.spinner, icons.spin, icons.inverse]"></i>
+ <span class="text-info">
+ <svg [cdsIcon]="icons.circle"
+ [size]="icons.size16"
+ ></svg>
</span>
</div>
<div class="col-md-9">
<div class="card-body p-1">
<h6 class="card-title bold">{{ executingTask.description }}</h6>
-
<div class="mb-1">
<ngb-progressbar type="info"
[value]="executingTask?.progress"
[striped]="true"
[animated]="true"></ngb-progressbar>
</div>
-
<p class="card-text text-muted">
<small class="date float-start">
{{ executingTask.begin_time | cdDate }}
<button type="button"
class="btn btn-light btn-block"
(click)="removeAll(); $event.stopPropagation()">
- <i [ngClass]="[icons.trash]"
- aria-hidden="true"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ ></svg>
<ng-container i18n>Clear notifications</ng-container>
</button>
title="Remove notification"
i18n-title
(click)="remove(i); $event.stopPropagation()">
- <i [ngClass]="[icons.trash]"></i>
+ <svg [cdsIcon]="icons.trash"
+ [size]="icons.size16"
+ ></svg>
</button>
<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"
i18n-title
(click)="silence(notification)">
- <i [ngClass]="[icons.mute]"></i>
+ <svg [cdsIcon]="icons.mute"
+ [size]="icons.size16"
+ ></svg>
</button>
<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"
i18n-title
(click)="expire(notification)">
- <i [ngClass]="[icons.bell]"></i>
+ <svg [cdsIcon]="icons.bell"
+ [size]="icons.size16"
+ ></svg>
</button>
[customBadgeValidators]="customBadgeValidators"
elemClass="me-2 select-menu-edit"
(selection)="selection.emit($event)">
- <i [ngClass]="[icons.edit]"></i>
+ <svg [cdsIcon]="icons.edit"
+ [size]="icons.size20"
+ class="cds-info-color"></svg>
</cd-select>
<span *ngFor="let dataItem of data">
<span class="badge badge-dark me-2">
<span class="me-2">{{ dataItem }}</span>
- <a class="badge-remove"
- (click)="cdSelect.removeItem(dataItem)">
- <i [ngClass]="[icons.destroy]"
- aria-hidden="true"></i>
+ <a class="badge-remove"
+ (click)="cdSelect.removeItem(dataItem)">
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size20"
+ class="cds-white"></svg>
</a>
</span>
</span>
[offset]="{ x: -210, y: 65 }"
[cdsOverflowMenu]="overflowMenuTpl"
data-testid="table-action-btn">
- <svg class="cds--btn__icon"
- cdsIcon="caret--down"
- size="16"></svg>
+ <svg
+ [cdsIcon]="icons.downArrow"
+ [size]="icons.size16"></svg>
</button>
<ng-template #overflowMenuTpl>
<ng-container *ngFor="let action of dropDownActions">
<!-- column filters -->
<ng-container *ngIf="columnFilters.length !== 0">
<div class="d-inline-flex position-relative">
- <svg cdsIcon="filter"
- size="16"
- class="align-self-center mb-2"></svg>
+ <svg [cdsIcon]="icons.filter"
+ [size]="icons.size16"></svg>
</div>
<cds-select (valueChange)="onSelectFilter($event)"
display="inline"
class="toolbar-action"
placement="bottom"
*ngIf="fetchData?.observers?.length > 0">
- <svg cdsIcon="renew"
- size="16"
+ <svg [cdsIcon]="icons.refresh"
+ [size]="icons.size16"
[ngClass]="{ 'cds--toolbar-action__icon': true, 'reload': loadingIndicator }"></svg>
</cds-icon-button>
<!-- end refresh button -->
placement="bottom"
[flip]="true"
[offset]="{ x: 3, y: 0 }">
- <svg cdsIcon="data-table"
- size="16"
+ <svg [cdsIcon]="icons.dataTable"
+ [size]="icons.size16"
class="cds--toolbar-action__icon"></svg>
</button>
<ng-template #showHideColumnsRef>
<span class="me-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
<button class="cds--tag__close-icon"
(click)="onChangeFilter(filter)">
- <svg cdsIcon="close"
- size="16"></svg>
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size16"></svg>
</button>
</cds-tag>
</ng-container>
export enum Icons {
/* Icons for Symbol */
- add = 'fa fa-plus', // Create, Add
- addCircle = 'fa fa-plus-circle', // Plus with Circle
- minusCircle = 'fa fa-minus-circle', // Minus with Circle
- edit = 'fa fa-pencil', // Edit, Edit Mode, Rename
- destroy = 'fa fa-times', // Destroy, Remove, Delete
- destroyCircle = 'fa fa-times-circle', // Destroy, Remove, Delete
- exchange = 'fa fa-exchange', // Edit-Peer
- copy = 'fa fa-copy', // Copy
- clipboard = 'fa fa-clipboard', // Clipboard
- flatten = 'fa fa-chain-broken', // Flatten, Link broken, Mark Lost
- trash = 'fa fa-trash-o', // Move to trash
- lock = 'fa fa-lock', // Protect
- unlock = 'fa fa-unlock', // Unprotect
+ add = 'add', // Create, Add
+ addCircle = 'add--filled', // Plus with Circle
+ minusCircle = 'subtract--alt', // Minus with Circle
+ edit = 'edit', // Edit, Edit Mode, Rename
+ destroy = 'close', // Destroy, Remove, Delete
+ exchange = 'arrows--horizontal', // Edit-Peer
+ copy = 'copy', // Copy
+ clipboard = 'copy--file', // Clipboard
+ flatten = 'unlink', // Flatten, Link broken, Mark Lost
+ trash = 'trash-can', // Move to trash
+ lock = 'locked', // Protect
+ unlock = 'unlocked', // Unprotect
clone = 'fa fa-clone', // clone
undo = 'fa fa-undo', // Rollback, Restore
- search = 'fa fa-search', // Search
+ search = 'search', // Search
start = 'fa fa-play', // Enable
stop = 'fa fa-stop', // Disable
analyse = 'fa fa-stethoscope', // Scrub
- deepCheck = 'fa fa-cog', // Deep Scrub, Setting, Configuration
+ deepCheck = 'settings', // Deep Scrub, Setting, Configuration
cogs = 'fa fa-cogs', // Multiple Settings, Configurations
- reweight = 'fa fa-balance-scale', // Reweight
- up = 'fa fa-arrow-up', // Up
- left = 'fa fa-arrow-left', // Mark out
- right = 'fa fa-arrow-right', // Mark in
- down = 'fa fa-arrow-down', // Mark Down
+ reweight = 'scales', // Reweight
+ up = 'arrow--up', // Up
+ left = 'arrow--left', // Mark out
+ right = 'arrow--right', // Mark in
+ down = 'arrow--down', // Mark Down
erase = 'fa fa-eraser', // Purge color: bd.$white;
expand = 'maximize', // Expand cluster
- user = 'fa fa-user', // User, Initiators
- users = 'fa fa-users', // Users, Groups
- share = 'fa fa-share-alt', // share
- key = 'fa fa-key-modern', // S3 Keys, Swift Keys, Authentication
- warning = 'fa fa-exclamation-triangle', // Notification warning
- info = 'fa fa-info', // Notification information
- infoCircle = 'fa fa-info-circle', // Info on landing page
- questionCircle = 'fa fa-question-circle-o',
- danger = 'fa fa-exclamation-circle',
- success = 'fa fa-check-circle',
- check = 'fa fa-check', // Notification check
- show = 'fa fa-eye', // Show
+ user = 'user', // User, Initiators
+ users = 'user--multiple', // Users, Groups
+ share = 'share', // share
+ key = 'password', // S3 Keys, Swift Keys, Authentication
+ warning = 'warning--alt--filled', // Notification warning
+ info = 'information', // Notification information
+ infoCircle = 'information--filled', // Info on landing page
+ questionCircle = 'help',
+ danger = 'warning--filled',
+ // success = 'fa fa-check-circle',
+ success = 'checkmark--filled',
+ check = 'checkmark', // Notification check
+ show = 'view', // Show
paragraph = 'fa fa-paragraph', // Silence Matcher - Attribute name
terminal = 'fa fa-terminal', // Silence Matcher - Value
magic = 'fa fa-magic', // Silence Matcher - Regex checkbox
hourglass = 'fa fa-hourglass-o', // Task
filledHourglass = 'fa fa-hourglass', // Task
table = 'fa fa-table', // Table,
- spinner = 'fa fa-spinner', // spinner, Load
- refresh = 'fa fa-refresh', // Refresh
+ spinner = 'fa fa-spinner',
+ refresh = 'renew', // Refresh
bullseye = 'fa fa-bullseye', // Target
disk = 'fa fa-hdd-o', // Hard disk, disks
server = 'fa fa-server', // Server, Portal
- filter = 'fa fa-filter', // Filter
- lineChart = 'fa fa-line-chart', // Line chart
+ filter = 'filter', // Filter
+ lineChart = 'analytics', // Line chart
signOut = 'fa fa-sign-out', // Sign Out
- health = 'fa fa-heartbeat', // Health
- circle = 'fa fa-circle', // Circle
- bell = 'fa fa-bell', // Notification
- mute = 'fa fa-bell-slash', // Mute or silence
- tag = 'fa fa-tag', // Tag, Badge
- leftArrow = 'fa fa-angle-left', // Left facing angle
- rightArrow = 'fa fa-angle-right', // Right facing angle
- leftArrowDouble = 'fa fa-angle-double-left', // Left facing Double angle
- rightArrowDouble = 'fa fa-angle-double-right', // Left facing Double angle
+ circle = 'dot-mark', // Circle
+ bell = 'notification', // Notification
+ mute = 'notification--off', // Mute or silence
+ leftArrow = 'caret--left', // Left facing angle
+ rightArrow = 'caret--right', // Right facing angle
+ downArrow = 'caret--down',
flag = 'fa fa-flag', // OSD configuration
- clearFilters = 'fa fa-window-close', // Clear filters, solid x
- download = 'fa fa-download', // Download
+ clearFilters = 'close--filled', // Clear filters, solid x
+ download = 'download', // Download
upload = 'fa fa-upload', // Upload
- close = 'fa fa-times', // Close
- json = 'fa fa-file-code-o', // JSON file
- text = 'fa fa-file-text', // Text file
- wrench = 'fa fa-wrench', // Configuration Error
+ code = 'code', // JSON file
+ document = 'document', // Text file
+ wrench = 'tools', // Configuration Error
enter = 'fa fa-sign-in', // Enter
exit = 'fa fa-sign-out', // Exit
restart = 'fa fa-history', // Restart
- deploy = 'fa fa-cube', // Deploy, Redeploy
+ deploy = 'cube', // Deploy, Redeploy
cubes = 'fa fa-cubes', // Object storage
sitemap = 'fa fa-sitemap', // Cluster, network, connections
database = 'fa fa-database', // Database, Block storage
calendar = 'fa fa-calendar',
externalUrl = 'fa fa-external-link', // links to external page
nfsExport = 'fa fa-server', // NFS export
-
+ launch = 'launch',
+ parentChild = 'parent-child',
+ dataTable = 'data-table',
/* Icons for special effect */
+ size16 = '16',
+ size20 = '20',
+ size24 = '24',
+ size32 = '32',
large = 'fa fa-lg', // icon becomes 33% larger
large2x = 'fa fa-2x', // icon becomes 50% larger
large3x = 'fa fa-3x', // icon becomes 3 times larger
expectObject(new CdNotification(), {
application: 'Ceph',
applicationClass: 'ceph-icon',
- iconClass: 'fa fa-info',
+ iconClass: 'information',
message: undefined,
options: undefined,
textClass: 'text-info',
{
application: 'Prometheus',
applicationClass: 'prometheus-icon',
- iconClass: 'fa fa-exclamation-triangle',
+ iconClass: 'warning--alt--filled',
message: 'Something failed',
options: undefined,
textClass: 'text-danger',
it('should expect the right success classes', () => {
expectObject(new CdNotification(new CdNotificationConfig(NotificationType.success)), {
- iconClass: 'fa fa-check',
+ iconClass: 'checkmark',
textClass: 'text-success'
});
});
NotificationType.error,
'Some alert (active)',
'Some alert is active <a href="http://some-alert" target="_blank">' +
- '<i class="fa fa-line-chart"></i></a>',
+ '<svg cdsIcon="analytics" size="16" ></svg></a>',
undefined,
'Prometheus'
)
}
private appendSourceLink(alert: PrometheusCustomAlert, message: string): string {
- return `${message} <a href="${alert.url}" target="_blank"><i class="${Icons.lineChart}"></i></a>`;
+ return `${message} <a href="${alert.url}" target="_blank"><svg cdsIcon="${Icons.lineChart}" size="${Icons.size16}" ></svg></a>`;
}
}
/******************************************
Code snippet
******************************************/
+
.cds--snippet {
width: fit-content;
}
.cds--tab-content {
background: var(--cds-layer-01);
}
+
+.cds-success-color {
+ fill: theme.$support-success;
+}
+
+.cds-danger-color {
+ fill: theme.$support-error;
+}
+
+.cds-info-color {
+ fill: theme.$support-info;
+}
+
+.cds-warning-color {
+ fill: theme.$support-caution-major;
+}
+
+.cds-white {
+ fill: theme.$icon-on-color;
+}
+
+.cds-icon--size-07 {
+ height: layout.$spacing-07;
+ width: layout.$spacing-07;
+}
+
+.cds-icon--size-10 {
+ display: block;
+ height: layout.$spacing-10;
+ margin: auto;
+ width: layout.$spacing-10;
+}
+
+.cds-mb-4 {
+ margin-bottom: layout.$spacing-02;
+}
}
createLink(url: string) {
- return `<a href="${url}" target="_blank"><i class="${Icons.lineChart}"></i></a>`;
+ return `<a href="${url}" target="_blank"><svg cdsIcon="${Icons.lineChart}" size="${Icons.size16}" ></svg></a>`;
}
}
projects / ceph.git / commitdiff