import { SharedModule } from '../../../shared/shared.module';
import { IscsiTargetDetailsComponent } from './iscsi-target-details.component';
+import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
+
describe('IscsiTargetDetailsComponent', () => {
let component: IscsiTargetDetailsComponent;
let fixture: ComponentFixture<IscsiTargetDetailsComponent>;
{
children: [{ id: 'disk_rbd_disk_1', value: 'rbd/disk_1' }],
settings: {
- cssClasses: { expanded: 'fa fa-fw fa-hdd-o fa-lg', leaf: 'fa fa-fw fa-hdd-o' },
+ cssClasses: {
+ expanded: _.join([Icons.width, Icons.large, Icons.disk], ' '),
+ leaf: _.join([Icons.width, Icons.disk], ' ')
+ },
selectionAllowed: false
},
value: 'Disks'
{
children: [{ value: 'node1:192.168.100.201' }],
settings: {
- cssClasses: { expanded: 'fa fa-fw fa-server fa-lg', leaf: 'fa fa-fw fa-server fa-lg' },
+ cssClasses: {
+ expanded: _.join([Icons.width, Icons.large, Icons.server], ' '),
+ leaf: _.join([Icons.width, Icons.large, Icons.server], ' ')
+ },
selectionAllowed: false
},
value: 'Portals'
{
id: 'disk_rbd_disk_1',
settings: {
- cssClasses: { expanded: 'fa fa-fw fa-hdd-o fa-lg', leaf: 'fa fa-fw fa-hdd-o' }
+ cssClasses: {
+ expanded: _.join([Icons.width, Icons.large, Icons.disk], ' '),
+ leaf: _.join([Icons.width, Icons.disk], ' ')
+ }
},
value: 'rbd/disk_1'
}
}
],
settings: {
- cssClasses: { expanded: 'fa fa-fw fa-user fa-lg', leaf: 'fa fa-fw fa-user' },
+ cssClasses: {
+ expanded: _.join([Icons.width, Icons.large, Icons.user], ' '),
+ leaf: _.join([Icons.width, Icons.user], ' ')
+ },
selectionAllowed: false
},
value: 'Initiators'
{
children: [],
settings: {
- cssClasses: { expanded: 'fa fa-fw fa-users fa-lg', leaf: 'fa fa-fw fa-users' },
+ cssClasses: {
+ expanded: _.join([Icons.width, Icons.large, Icons.user], ' '),
+ leaf: _.join([Icons.width, Icons.user], ' ')
+ },
selectionAllowed: false
},
value: 'Groups'
}
],
id: 'root',
- settings: { cssClasses: { expanded: 'fa fa-fw fa-bullseye fa-lg' }, static: true },
+ settings: {
+ cssClasses: { expanded: _.join([Icons.width, Icons.large, Icons.bullseye], ' ') },
+ static: true
+ },
value: 'iqn.2003-01.com.redhat.iscsi-gw:iscsi-igw'
});
});
import { NodeEvent, TreeModel } from 'ng2-tree';
import { TableComponent } from '../../../shared/datatable/table/table.component';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../shared/models/cd-table-selection';
import { IscsiBackstorePipe } from '../../../shared/pipes/iscsi-backstore.pipe';
private generateTree() {
this.metadata = { root: this.selectedItem.target_controls };
-
const cssClasses = {
target: {
- expanded: 'fa fa-fw fa-bullseye fa-lg'
+ expanded: _.join([Icons.width, Icons.large, Icons.bullseye], ' ')
},
initiators: {
- expanded: 'fa fa-fw fa-user fa-lg',
- leaf: 'fa fa-fw fa-user'
+ expanded: _.join([Icons.width, Icons.large, Icons.user], ' '),
+ leaf: _.join([Icons.width, Icons.user], ' ')
},
groups: {
- expanded: 'fa fa-fw fa-users fa-lg',
- leaf: 'fa fa-fw fa-users'
+ expanded: _.join([Icons.width, Icons.large, Icons.user], ' '),
+ leaf: _.join([Icons.width, Icons.user], ' ')
},
disks: {
- expanded: 'fa fa-fw fa-hdd-o fa-lg',
- leaf: 'fa fa-fw fa-hdd-o'
+ expanded: _.join([Icons.width, Icons.large, Icons.disk], ' '),
+ leaf: _.join([Icons.width, Icons.disk], ' ')
},
portals: {
- expanded: 'fa fa-fw fa-server fa-lg',
- leaf: 'fa fa-fw fa-server fa-lg'
+ expanded: _.join([Icons.width, Icons.large, Icons.server], ' '),
+ leaf: _.join([Icons.width, Icons.large, Icons.server], ' ')
}
};
id="ecp-info-button"
type="button"
(click)="targetSettingsModal()">
- <i class="fa fa-cogs fa-fw"
+ <i [ngClass]="[icons.deepCheck, icons.width]"
aria-hidden="true"></i>
</button>
</span>
<button class="btn btn-default"
type="button"
(click)="removePortal(i, portal)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[messages]="messages.portals"
(selection)="onPortalSelection($event)"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add portal</ng-container>
</cd-select>
</div>
<button class="btn btn-default"
type="button"
(click)="imageSettingsModal(image)">
- <i class="fa fa-cogs fa-fw"
+ <i [ngClass]="[icons.deepCheck, icons.width]"
aria-hidden="true"></i>
</button>
<button class="btn btn-default"
type="button"
(click)="removeImage(i, image)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[messages]="messages.images"
(selection)="onImageSelection($event)"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button type="button"
class="close"
(click)="removeInitiator(ii)">
- <i class="fa fa-remove fa-fw"></i>
+ <i [ngClass]="[icons.deepCheck, icons.width]"></i>
</button>
</div>
<div class="panel-body">
<button class="btn btn-default"
type="button"
(click)="removeInitiatorImage(initiator, li, ii, image)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[options]="imagesInitiatorSelections[ii]"
[messages]="messages.initiatorImage"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button (click)="addInitiator(); false"
class="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add initiator</ng-container>
</button>
</div>
<button type="button"
class="close"
(click)="groups.removeAt(gi)">
- <i class="fa fa-remove fa-fw"></i>
+ <i [ngClass]="[icons.destroy, icons.width]"></i>
</button>
</div>
<div class="panel-body">
<button class="btn btn-default"
type="button"
(click)="removeGroupInitiator(group, i, gi)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[messages]="messages.groupInitiator"
(selection)="onGroupMemberSelection($event)"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add initiator</ng-container>
</cd-select>
</div>
<button class="btn btn-default"
type="button"
(click)="removeGroupDisk(group, i, gi)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[options]="groupDiskSelections[gi]"
[messages]="messages.initiatorImage"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add image</ng-container>
</cd-select>
</div>
<button (click)="addGroup(); false"
class="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add group</ng-container>
</button>
</div>
import { SelectMessages } from '../../../shared/components/select/select-messages.model';
import { SelectOption } from '../../../shared/components/select/select-option.model';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import { FinishedTask } from '../../../shared/models/finished-task';
unsupported_rbd_features: any;
required_rbd_features: any;
+ icons = Icons;
+
isEdit = false;
target_iqn: string;
<button class="btn btn-sm btn-default btn-label"
type="button"
(click)="configureDiscoveryAuth()">
- <i class="fa fa-fw fa-key-modern"
+ <i [ngClass]="[icons.key, icons.width]"
aria-hidden="true">
</i>
<ng-container i18n>Discovery authentication</ng-container>
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../shared/models/cd-table-selection';
summaryDataSubscription: Subscription;
tableActions: CdTableAction[];
targets = [];
+ icons = Icons;
builders = {
'iscsi/target/create': (metadata) => {
this.tableActions = [
{
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => '/block/iscsi/targets/create',
name: this.actionLabels.CREATE
},
{
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => `/block/iscsi/targets/edit/${this.selection.first().target_iqn}`,
name: this.actionLabels.EDIT
},
{
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteIscsiTargetModal(),
name: this.actionLabels.DELETE
}
import { RbdMirroringService } from '../../../../shared/api/rbd-mirroring.service';
import { CriticalConfirmationModalComponent } from '../../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
+import { Icons } from '../../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../../shared/models/cd-table-action';
import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
import { FinishedTask } from '../../../../shared/models/finished-task';
const editModeAction: CdTableAction = {
permission: 'update',
- icon: 'fa-edit',
+ icon: Icons.edit,
click: () => this.editModeModal(),
name: this.i18n('Edit Mode'),
canBePrimary: () => true
};
const addPeerAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
name: this.i18n('Add Peer'),
click: () => this.editPeersModal('add'),
disable: () => !this.selection.first() || this.selection.first().mirror_mode === 'disabled',
};
const editPeerAction: CdTableAction = {
permission: 'update',
- icon: 'fa-exchange',
+ icon: Icons.exchange,
name: this.i18n('Edit Peer'),
click: () => this.editPeersModal('edit'),
visible: () => !!this.getPeerUUID()
};
const deletePeerAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
name: this.i18n('Delete Peer'),
click: () => this.deletePeersModal(),
visible: () => !!this.getPeerUUID()
<h3 class="page-header">
<span
(click)="toggleSectionVisibility(section.class)"
- class="collapsible">{{ section.heading }} <i [ngClass]="{'fa-plus-circle': !sectionVisibility[section.class], 'fa-minus-circle': sectionVisibility[section.class]}" class="fa" aria-hidden="true"></i></span>
+ class="collapsible">{{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle" aria-hidden="true"></i></span>
</h3>
<div class="{{ section.class }}" [hidden]="!sectionVisibility[section.class]">
<div
title="Remove the local configuration value. The parent configuration value will be inherited and used instead."
i18n-title
(click)="reset(option.name)">
- <i class="fa fa-eraser"
+ <i [ngClass]="[icons.erase]"
aria-hidden="true"></i>
</button>
</span>
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import {
RbdConfigurationEntry,
}>;
@Output()
changes = new EventEmitter<any>();
+
+ icons = Icons;
+
ngDataReady = new EventEmitter<any>();
initialData: RbdConfigurationEntry[];
configurationType = RbdConfigurationType;
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
)}`;
const addAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
canBePrimary: (selection: CdTableSelection) => !selection.hasSingleSelection,
name: this.actionLabels.CREATE
};
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => this.urlBuilder.getEdit(getImageUri()),
name: this.actionLabels.EDIT
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteRbdModal(),
name: this.actionLabels.DELETE
};
canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
disable: (selection: CdTableSelection) =>
!selection.hasSingleSelection || selection.first().cdExecuting,
- icon: 'fa-copy',
+ icon: Icons.copy,
routerLink: () => `/block/rbd/copy/${getImageUri()}`,
name: this.actionLabels.COPY
};
permission: 'update',
disable: (selection: CdTableSelection) =>
!selection.hasSingleSelection || selection.first().cdExecuting || !selection.first().parent,
- icon: 'fa-chain-broken',
+ icon: Icons.flatten,
click: () => this.flattenRbdModal(),
name: this.actionLabels.FLATTEN
};
const moveAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-trash-o',
+ icon: Icons.trash,
click: () => this.trashRbdModal(),
name: this.actionLabels.TRASH
};
import { I18n } from '@ngx-translate/i18n-polyfill';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableSelection } from '../../../shared/models/cd-table-selection';
this.create = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
name: actionLabels.CREATE
};
this.rename = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
name: actionLabels.RENAME
};
this.protect = {
permission: 'update',
- icon: 'fa-lock',
+ icon: Icons.lock,
visible: (selection: CdTableSelection) =>
selection.hasSingleSelection && !selection.first().is_protected,
name: actionLabels.PROTECT
};
this.unprotect = {
permission: 'update',
- icon: 'fa-unlock',
+ icon: Icons.unlock,
visible: (selection: CdTableSelection) =>
selection.hasSingleSelection && selection.first().is_protected,
name: actionLabels.UNPROTECT
canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
disable: (selection: CdTableSelection) =>
!selection.hasSingleSelection || selection.first().cdExecuting,
- icon: 'fa-clone',
+ icon: Icons.clone,
name: actionLabels.CLONE
};
this.copy = {
canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
disable: (selection: CdTableSelection) =>
!selection.hasSingleSelection || selection.first().cdExecuting,
- icon: 'fa-copy',
+ icon: Icons.copy,
name: actionLabels.COPY
};
this.rollback = {
permission: 'update',
- icon: 'fa-undo',
+ icon: Icons.undo,
name: actionLabels.ROLLBACK
};
this.deleteSnap = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
disable: (selection: CdTableSelection) => {
const first = selection.first();
return !selection.hasSingleSelection || first.cdExecuting || first.is_protected;
type="button"
(click)="purgeModal()"
*ngIf="permission.delete">
- <i class="fa fa-fw fa-times"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
<ng-container i18n>Purge Trash</ng-container>
</button>
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
@ViewChild('deleteTpl')
deleteTpl: TemplateRef<any>;
+ icons = Icons;
+
columns: CdTableColumn[];
executingTasks: ExecutingTask[] = [];
images: any;
public actionLabels: ActionLabelsI18n
) {
this.permission = this.authStorageService.getPermissions().rbdImage;
-
const restoreAction: CdTableAction = {
permission: 'update',
- icon: 'fa-undo',
+ icon: Icons.undo,
click: () => this.restoreModal(),
name: this.actionLabels.RESTORE
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteModal(),
name: this.actionLabels.DELETE
};
<option *ngFor="let opt of filter.options">{{ opt }}</option>
</select>
</div>
- <a class="fa-stack"
- title="Reset filters"
+ <a [ngClass]="[icons.stack]"
+ title="Reset filters"
(click)="resetFilter()">
- <i class="fa fa-filter fa-stack-2x"></i>
- <i class="fa fa-times fa-stack-1x" style="margin-left: 8px; margin-top: 5px;"></i>
+ <i [ngClass]="[icons.filter, icons.stack2x]"></i>
+ <i [ngClass]="[icons.destroy, icons.stack1x]" style="margin-left: 8px; margin-top: 5px;"></i>
</a>
</div>
<cd-configuration-details cdTableDetail
import { ConfigurationService } from '../../../shared/api/configuration.service';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
permission: Permission;
tableActions: CdTableAction[];
data = [];
+ icons = Icons;
columns: CdTableColumn[];
selection = new CdTableSelection();
filters = [
this.selection.first() && `${encodeURIComponent(this.selection.first().name)}`;
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => `/configuration/edit/${getConfigOptUri()}`,
name: this.actionLabels.EDIT,
disable: () => !this.isEditable(this.selection)
<label i18n>Keyword:</label>
<div class="input-group">
<span class="input-group-addon">
- <i class="glyphicon glyphicon-search"></i>
+ <i [ngClass]="[icons.search]"></i>
</span>
<input class="form-control"
type="text"
<button type="button"
class="btn btn-default clear-input tc_clearInputBtn"
(click)="clearSearchKey()">
- <i class="icon-prepend fa fa-remove"></i>
+ <i class="icon-prepend {{ icons.destroy }}"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-default clear-input tc_clearInputBtn"
(click)="clearDate()">
- <i class="icon-prepend fa fa-remove"></i>
+ <i class="icon-prepend {{ icons.destroy }}"></i>
</button>
</span>
</div>
import { Component, OnDestroy, OnInit } from '@angular/core';
import { LogsService } from '../../../shared/api/logs.service';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-logs',
contentData: any;
clog: Array<any>;
audit_log: Array<any>;
+ icons = Icons;
interval: number;
bsConfig = {
import { MgrModuleService } from '../../../../shared/api/mgr-module.service';
import { TableComponent } from '../../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../../shared/models/cd-table-column';
import { CdTableFetchDataContext } from '../../../../shared/models/cd-table-fetch-data-context';
return Object.values(this.selection.first().options).length === 0;
},
routerLink: () => `/mgr-modules/edit/${getModuleUri()}`,
- icon: 'fa-pencil'
+ icon: Icons.edit
},
{
name: this.i18n('Enable'),
permission: 'update',
click: () => this.updateModuleState(),
disable: () => this.isTableActionDisabled('enabled'),
- icon: 'fa-play'
+ icon: Icons.start
},
{
name: this.i18n('Disable'),
permission: 'update',
click: () => this.updateModuleState(),
disable: () => this.isTableActionDisabled('disabled'),
- icon: 'fa-stop'
+ icon: Icons.stop
}
];
}
import { ActionLabelsI18n } from '../../../../shared/constants/app.constants';
import { TableComponent } from '../../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
bsModalRef: BsModalRef;
columns: CdTableColumn[];
clusterWideActions: CdTableAction[];
+ icons = Icons;
osds = [];
selection = new CdTableSelection();
{
name: this.actionLabels.SCRUB,
permission: 'update',
- icon: 'fa-stethoscope',
+ icon: Icons.analyse,
click: () => this.scrubAction(false),
disable: () => !this.hasOsdSelected
},
{
name: this.actionLabels.DEEP_SCRUB,
permission: 'update',
- icon: 'fa-cog',
+ icon: Icons.deepCheck,
click: () => this.scrubAction(true),
disable: () => !this.hasOsdSelected
},
permission: 'update',
click: () => this.reweight(),
disable: () => !this.hasOsdSelected,
- icon: 'fa-balance-scale'
+ icon: Icons.reweight
},
{
name: this.actionLabels.MARK_OUT,
permission: 'update',
click: () => this.showConfirmationModal(this.i18n('out'), this.osdService.markOut),
disable: () => this.isNotSelectedOrInState('out'),
- icon: 'fa-arrow-left'
+ icon: Icons.left
},
{
name: this.actionLabels.MARK_IN,
permission: 'update',
click: () => this.showConfirmationModal(this.i18n('in'), this.osdService.markIn),
disable: () => this.isNotSelectedOrInState('in'),
- icon: 'fa-arrow-right'
+ icon: Icons.right
},
{
name: this.actionLabels.MARK_DOWN,
permission: 'update',
click: () => this.showConfirmationModal(this.i18n('down'), this.osdService.markDown),
disable: () => this.isNotSelectedOrInState('down'),
- icon: 'fa-arrow-down'
+ icon: Icons.down
},
{
name: this.actionLabels.MARK_LOST,
this.osdService.markLost
),
disable: () => this.isNotSelectedOrInState('up'),
- icon: 'fa-unlink'
+ icon: Icons.flatten
},
{
name: this.actionLabels.PURGE,
this.osdService.purge
),
disable: () => this.isNotSelectedOrInState('up'),
- icon: 'fa-eraser'
+ icon: Icons.erase
},
{
name: this.actionLabels.DESTROY,
this.osdService.destroy
),
disable: () => this.isNotSelectedOrInState('up'),
- icon: 'fa-remove'
+ icon: Icons.destroy
}
];
}
this.clusterWideActions = [
{
name: this.i18n('Flags'),
- icon: 'fa-flag',
+ icon: Icons.flag,
click: () => this.configureFlagsAction(),
permission: 'read',
visible: () => this.permissions.osd.read
},
{
name: this.i18n('Recovery Priority'),
- icon: 'fa-cog',
+ icon: Icons.deepCheck,
click: () => this.configureQosParamsAction(),
permission: 'read',
visible: () => this.permissions.configOpt.read
},
{
name: this.i18n('PG scrub'),
- icon: 'fa-stethoscope',
+ icon: Icons.analyse,
click: () => this.configurePgScrubAction(),
permission: 'read',
visible: () => this.permissions.configOpt.read
<ng-template #externalLinkTpl
let-row="row"
let-value="value">
- <a [href]="value" target="_blank"><i class="fa fa-line-chart"></i> Source</a>
+ <a [href]="value" target="_blank"><i [ngClass]="[icons.lineChart]"></i> Source</a>
</ng-template>
-
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../../shared/enum/icons.enum';
import { CdTableColumn } from '../../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
import { CdDatePipe } from '../../../../shared/pipes/cd-date.pipe';
externalLinkTpl: TemplateRef<any>;
columns: CdTableColumn[];
selection = new CdTableSelection();
+ icons = Icons;
customCss = {
'label label-danger': 'active',
'label label-warning': 'unprocessed',
<ng-template #logsLink>
<ng-container *ngIf="permissions.log.read">
<p class="logs-link"
- i18n><i
class="fa fa-info-circle"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
+ i18n><i
[ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
</ng-container>
</ng-template>
</div>
import { Subscription } from 'rxjs/Subscription';
import { HealthService } from '../../../shared/api/health.service';
+import { Icons } from '../../../shared/enum/icons.enum';
import { Permissions } from '../../../shared/models/permissions';
import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
interval = new Subscription();
permissions: Permissions;
enabledFeature$: FeatureTogglesMap$;
+ icons = Icons;
rawCapacityChartConfig = {
options: {
<span class="form-control no-border">
<button class="btn btn-default btn-label pull-right"
(click)="addClient()">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add clients</ng-container>
</button>
</span>
import * as _ from 'lodash';
import { NfsService } from '../../../shared/api/nfs.service';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
@Component({
nfsSquash: any[] = this.nfsService.nfsSquash;
nfsAccessType: any[] = this.nfsService.nfsAccessType;
+ icons = Icons;
constructor(private nfsService: NfsService, private i18n: I18n) {}
<button class="btn btn-default"
type="button"
(click)="removeDaemon(i, daemon)">
- <i class="fa fa-remove fa-fw"
+ <i [ngClass]="[icons.destroy, icons.width]"
aria-hidden="true"></i>
</button>
</span>
[messages]="daemonsMessages"
(selection)="onDaemonSelection()"
elemClass="btn btn-default pull-right">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>Add daemon</ng-container>
</cd-select>
</div>
import { SelectMessages } from '../../../shared/components/select/select-messages.model';
import { SelectOption } from '../../../shared/components/select/select-option.model';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
allClusters: string[] = null;
allDaemons = {};
+ icons = Icons;
allFsals: any[] = [];
allRgwUsers: any[] = [];
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
const createAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => '/nfs/create',
canBePrimary: (selection: CdTableSelection) => !selection.hasSingleSelection,
name: this.actionLabels.CREATE
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => `/nfs/edit/${getNfsUri()}`,
name: this.actionLabels.EDIT
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteNfsModal(),
name: this.actionLabels.DELETE
};
<div class="col-sm-12 col-lg-6">
<h1 *ngIf="!(info && ecProfiles)"
class="jumbotron">
- <i class="fa fa-lg fa-pulse fa-spinner text-primary"></i>
+ <i [ngClass]="[icons.spinner, icons.pulse, icons.large]" class="text-primary"></i>
<ng-container i18n>Loading...</ng-container>
</h1>
<form name="form"
id="crush-info-button"
type="button"
(click)="data.crushInfo = !data.crushInfo">
- <i class="fa fa-question-circle"
+ <i [ngClass]="[icons.questionCircle]"
aria-hidden="true"></i>
</button>
</span>
id="ecp-info-button"
type="button"
(click)="data.erasureInfo = !data.erasureInfo">
- <i class="fa fa-question-circle"
+ <i [ngClass]="[icons.questionCircle]"
aria-hidden="true"></i>
</button>
<button class="btn btn-default"
type="button"
[disabled]="editing"
(click)="addErasureCodeProfile()">
- <i class="fa fa-plus"
+ <i [ngClass]="[icons.add]"
aria-hidden="true"></i>
</button>
<button class="btn btn-default"
type="button"
(click)="deleteErasureCodeProfile()"
[disabled]="editing || ecProfiles.length < 1">
- <i class="fa fa-trash-o"
+ <i [ngClass]="[icons.trash]"
aria-hidden="true"></i>
</button>
</span>
import { PoolService } from '../../../shared/api/pool.service';
import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
import { ActionLabelsI18n, URLVerbs } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import {
currentConfigurationValues: { [configKey: string]: any } = {};
action: string;
resource: string;
+ icons = Icons;
constructor(
private dimlessBinaryPipe: DimlessBinaryPipe,
import { ActionLabelsI18n, URLVerbs } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
this.tableActions = [
{
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
name: this.actionLabels.CREATE
},
{
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () =>
this.urlBuilder.getEdit(encodeURIComponent(this.selection.first().pool_name)),
name: this.actionLabels.EDIT
},
{
permission: 'delete',
- icon: 'fa-trash-o',
+ icon: Icons.destroy,
click: () => this.deletePoolModal(),
name: this.actionLabels.DELETE,
disable: () => !this.selection.first() || !this.monAllowPoolDelete,
import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
this.selection.first() && `${encodeURIComponent(this.selection.first().bid)}`;
const addAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
name: this.actionLabels.CREATE
};
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => this.urlBuilder.getEdit(getBucketUri()),
name: this.actionLabels.EDIT
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteAction(),
name: this.actionLabels.DELETE
};
class="btn btn-sm btn-primary"
[disabled]="!keysSelection.hasSingleSelection"
(click)="showKeyModal()">
- <i class="fa fa-eye"></i>
+ <i [ngClass]="[icons.show]"></i>
<ng-container i18n>Show</ng-container>
</button>
</div>
import { BsModalService } from 'ngx-bootstrap/modal';
import { RgwUserService } from '../../../shared/api/rgw-user.service';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableSelection } from '../../../shared/models/cd-table-selection';
import { RgwUserS3Key } from '../models/rgw-user-s3-key';
keysColumns: CdTableColumn[] = [];
keysSelection: CdTableSelection = new CdTableSelection();
+ icons = Icons;
+
constructor(
private rgwUserService: RgwUserService,
private bsModalService: BsModalService,
<span *ngFor="let subuser of subusers; let i=index;">
<div class="input-group">
<span class="input-group-addon">
- <i class="icon-prepend fa fa-user"></i>
+ <i class="icon-prepend {{ icons.user }}"></i>
</span>
<input type="text"
class="form-control"
readonly>
<span class="input-group-addon"
style="border-left: 0; border-right: 0;">
- <i class="icon-prepend fa fa-share-alt"></i>
+ <i class="icon-prepend {{ icons.share }}"></i>
</span>
<input type="text"
class="form-control"
i18n-tooltip
tooltip="Edit"
(click)="showSubuserModal(i)">
- <i class="fa fa-cogs"></i>
+ <i [ngClass]="[icons.edit]"></i>
</button>
<button type="button"
class="btn btn-default tc_deleteSubuserButton"
i18n-tooltip
tooltip="Delete"
(click)="deleteSubuser(i)">
- <i class="fa fa-times"></i>
+ <i [ngClass]="[icons.destroy]"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-sm btn-default btn-label pull-right tc_addSubuserButton"
(click)="showSubuserModal()">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>{{ actionLabels.CREATE | titlecase }} {{ subuserLabel | upperFirst }}</ng-container>
</button>
</span>
<span *ngFor="let key of s3Keys; let i=index;">
<div class="input-group">
<span class="input-group-addon">
- <i class="icon-prepend fa fa-key"></i>
+ <i class="icon-prepend {{ icons.key }}"></i>
</span>
<input type="text"
class="form-control"
i18n-tooltip
tooltip="Show"
(click)="showS3KeyModal(i)">
- <i class="fa fa-eye"></i>
+ <i [ngClass]="[icons.show]"></i>
</button>
<button type="button"
class="btn btn-default tc_deleteS3KeyButton"
i18n-tooltip
tooltip="Delete"
(click)="deleteS3Key(i)">
- <i class="fa fa-times"></i>
+ <i [ngClass]="[icons.destroy]"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-sm btn-default btn-label pull-right tc_addS3KeyButton"
(click)="showS3KeyModal()">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>{{ actionLabels.CREATE | titlecase }} {{ s3keyLabel | upperFirst }}</ng-container>
</button>
</span>
<span *ngFor="let key of swiftKeys; let i=index;">
<div class="input-group">
<span class="input-group-addon">
- <i class="icon-prepend fa fa-key"></i>
+ <i class="icon-prepend {{ icons.key }}"></i>
</span>
<input type="text"
class="form-control"
i18n-tooltip
tooltip="Show"
(click)="showSwiftKeyModal(i)">
- <i class="fa fa-eye"></i>
+ <i [ngClass]="[icons.show]"></i>
</button>
</span>
</div>
<span *ngFor="let cap of capabilities; let i=index;">
<div class="input-group">
<span class="input-group-addon">
- <i class="icon-prepend fa fa-share-alt"></i>
+ <i class="icon-prepend {{ icons.share }}"></i>
</span>
<input type="text"
class="form-control"
i18n-tooltip
tooltip="Edit"
(click)="showCapabilityModal(i)">
- <i class="fa fa-cogs"></i>
+ <i [ngClass]="[icons.edit]"></i>
</button>
<button type="button"
class="btn btn-default tc_deleteCapButton"
i18n-tooltip
tooltip="Delete"
(click)="deleteCapability(i)">
- <i class="fa fa-times"></i>
+ <i [ngClass]="[icons.destroy]"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-sm btn-default btn-label pull-right tc_addCapButton"
(click)="showCapabilityModal()">
- <i class="fa fa-fw fa-plus"></i>
+ <i [ngClass]="[icons.add, icons.width]"></i>
<ng-container i18n>{{ actionLabels.ADD | titlecase }} {{ capabilityLabel | upperFirst }}</ng-container>
</button>
</span>
import { RgwUserService } from '../../../shared/api/rgw-user.service';
import { ActionLabelsI18n, URLVerbs } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { NotificationType } from '../../../shared/enum/notification-type.enum';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
error = false;
loading = false;
submitObservables: Observable<Object>[] = [];
-
+ icons = Icons;
subusers: RgwUserSubuser[] = [];
s3Keys: RgwUserS3Key[] = [];
swiftKeys: RgwUserSwiftKey[] = [];
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { TableComponent } from '../../../shared/datatable/table/table.component';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
this.selection.first() && `${encodeURIComponent(this.selection.first().uid)}`;
const addAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
name: this.actionLabels.CREATE
};
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () => this.urlBuilder.getEdit(getUserUri()),
name: this.actionLabels.EDIT
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteAction(),
name: this.actionLabels.DELETE
};
import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { Icons } from '../../../shared/enum/icons.enum';
import { NotificationType } from '../../../shared/enum/notification-type.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
this.permission = this.authStorageService.getPermissions().user;
const addAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
name: this.actionLabels.CREATE
};
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
disable: () => !this.selection.hasSingleSelection || this.selection.first().system,
routerLink: () =>
this.selection.first() && this.urlBuilder.getEdit(this.selection.first().name),
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
disable: () => !this.selection.hasSingleSelection || this.selection.first().system,
click: () => this.deleteRoleModal(),
name: this.actionLabels.DELETE
import { UserService } from '../../../shared/api/user.service';
import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
+import { Icons } from '../../../shared/enum/icons.enum';
import { NotificationType } from '../../../shared/enum/notification-type.enum';
import { CdTableAction } from '../../../shared/models/cd-table-action';
import { CdTableColumn } from '../../../shared/models/cd-table-column';
this.permission = this.authStorageService.getPermissions().user;
const addAction: CdTableAction = {
permission: 'create',
- icon: 'fa-plus',
+ icon: Icons.add,
routerLink: () => this.urlBuilder.getCreate(),
name: this.actionLabels.CREATE
};
const editAction: CdTableAction = {
permission: 'update',
- icon: 'fa-pencil',
+ icon: Icons.edit,
routerLink: () =>
this.selection.first() && this.urlBuilder.getEdit(this.selection.first().username),
name: this.actionLabels.EDIT
};
const deleteAction: CdTableAction = {
permission: 'delete',
- icon: 'fa-times',
+ icon: Icons.destroy,
click: () => this.deleteUserModal(),
name: this.actionLabels.DELETE
};
<div class="col-md-12 text-center">
<h1 i18n>Forbidden</h1>
- <i class="fa fa-lock text-danger"></i>
+ <i class="{{ icons.lock }} text-danger"></i>
<h2 i18n>Sorry, you are not allowed to see what you were looking for.</h2>
import { Component } from '@angular/core';
+import { Icons } from '../../shared/enum/icons.enum';
@Component({
selector: 'cd-forbidden',
styleUrls: ['./forbidden.component.scss']
})
export class ForbiddenComponent {
+ icons = Icons;
constructor() {}
}
data-toggle="dropdown"
i18n-title
title="Dashboard Settings">
- <i class="fa fa-fw fa-cog"></i>
+ <i [ngClass]="[icons.deepCheck, icons.width]"></i>
<span i18n
class="visible-xs-inline-block">Dashboard Settings</span>
<span class="caret"></span>
import { Component, OnInit } from '@angular/core';
+import { Icons } from '../../../shared/enum/icons.enum';
import { Permission } from '../../../shared/models/permissions';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
})
export class AdministrationComponent implements OnInit {
userPermission: Permission;
+ icons = Icons;
constructor(private authStorageService: AuthStorageService) {
this.userPermission = this.authStorageService.getPermissions().user;
data-toggle="dropdown"
i18n-title
title="Help">
- <i class="fa fa-fw fa-question-circle-o"></i>
+ <i [ngClass]="[icons.questionCircle, icons.width]"></i>
<span i18n
class="visible-xs-inline-block">Help</span>
<span class="caret"></span>
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
import { SummaryService } from '../../../shared/services/summary.service';
docsFormElement;
docsUrl: string;
modalRef: BsModalRef;
+ icons = Icons;
constructor(
private summaryService: SummaryService,
data-toggle="dropdown"
i18n-title
title="Logged in user">
- <i class="fa fa-fw fa-user"></i>
+ <i [ngClass]="[icons.user, icons.width]"></i>
<span i18n
class="visible-xs-inline-block">Logged in user</span>
<span class="caret"></span>
<li role="menuitem">
<a class="dropdown-item"
(click)="logout()">
- <i class="fa fa-sign-out fa-fw"></i>
+ <i [ngClass]="[icons.signOut, icons.width]"></i>
<span i18n>Sign out</span>
</a>
</li>
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../shared/api/auth.service';
+import { Icons } from '../../../shared/enum/icons.enum';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
@Component({
})
export class IdentityComponent implements OnInit {
username: string;
+ icons = Icons;
constructor(private authStorageService: AuthStorageService, private authService: AuthService) {}
<li routerLinkActive="active"
class="tc_menuitem tc_menuitem_dashboard">
<a routerLink="/dashboard">
- <i class="fa fa-heartbeat fa-fw"
+ <i [ngClass]="[icons.health, icons.width]"
[ngStyle]="summaryData?.health_status | healthColor"></i>
<span i18n>Dashboard</span>
</a>
import { Component, OnInit } from '@angular/core';
import { PrometheusService } from '../../../shared/api/prometheus.service';
+import { Icons } from '../../../shared/enum/icons.enum';
import { Permissions } from '../../../shared/models/permissions';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
import {
export class NavigationComponent implements OnInit {
permissions: Permissions;
summaryData: any;
+ icons = Icons;
isCollapsed = true;
prometheusConfigured = false;
<ng-template #notificationsTpl>
<div *ngIf="notifications.length > 0">
<button type="button" class="btn btn-default btn-sm btn-block" (click)="removeAll()">
- <i class="fa fa-trash-o" aria-hidden="true"></i>
+ <i [ngClass]="[icons.trash]" aria-hidden="true"></i>
<ng-container i18n>Remove all</ng-container>
</button>
<table>
<tr>
<td rowspan="3" class="icon-col text-center">
- <span [ngClass]="['fa-stack fa-2x', notification.textClass]">
- <i class="fa fa-circle fa-stack-2x"></i>
- <i [ngClass]="['fa fa-stack-1x fa-inverse', notification.iconClass]"></i>
+ <span [ngClass]="[icons.stack, icons.large2x, notification.textClass]">
+ <i [ngClass]="[icons.circle, icons.stack2x]"></i>
+ <i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
</span>
</td>
<td>
outsideClick="true"
i18n-title
title="Recent Notifications">
- <i class="fa fa-fw fa-bell"></i>
+ <i [ngClass]="[icons.bell, icons.width]"></i>
<span i18n
class="visible-xs-inline-block">Recent Notifications</span>
</a>
import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdNotification } from '../../../shared/models/cd-notification';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
import { NotificationService } from '../../../shared/services/notification.service';
export class NotificationsComponent implements OnInit, OnDestroy {
notifications: CdNotification[];
private interval: number;
+ icons = Icons;
constructor(
public notificationService: NotificationService,
<table>
<tr>
<td rowspan="3" class="icon-col text-center">
- <span class="fa-stack fa-2x text-info">
- <i class="fa fa-circle fa-stack-2x"></i>
- <i class="fa fa-stack-1x fa-inverse fa-spinner fa-spin"></i>
+ <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>
</td>
<td colspan="3"><strong>{{ executingTask.description }}</strong></td>
<tr>
<td rowspan="3" class="icon-col text-center">
<span *ngIf="!finishedTask.errorMessage">
- <span class="fa-stack fa-2x text-success">
- <i class="fa fa-circle fa-stack-2x"></i>
- <i class="fa fa-stack-1x fa-inverse fa-check"></i>
+ <span [ngClass]="[icons.stack, icons.large2x]" class="text-success">
+ <i [ngClass]="[icons.stack2x, icons.circle]"></i>
+ <i [ngClass]="[icons.stack1x, icons.inverse, icons.check]"></i>
</span>
</span>
<span *ngIf="finishedTask.errorMessage">
- <span class="fa-stack fa-2x text-danger">
- <i class="fa fa-circle fa-stack-2x"></i>
- <i class="fa fa-stack-1x fa-inverse fa-exclamation-triangle"></i>
+ <span [ngClass]="[icons.stack, icons.large2x]" class="text-danger">
+ <i [ngClass]="[icons.stack2x, icons.circle]"></i>
+ <i [ngClass]="[icons.stack1x, icons.inverse, icons.warning]"></i>
</span>
</span>
</td>
outsideClick="true"
i18n-title
title="Background Tasks">
- <i class="fa fa-fw"
- [ngClass]="icon"></i>
+ <i [ngClass]="[icon,icons.width]"></i>
<span i18n
class="visible-xs-inline-block">Background Tasks</span>
<span *ngIf="executingTasks.length > 0"> ({{ executingTasks.length }})</span>
import { Component, OnInit } from '@angular/core';
+import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ExecutingTask } from '../../../shared/models/executing-task';
import { FinishedTask } from '../../../shared/models/finished-task';
import { SummaryService } from '../../../shared/services/summary.service';
executingTasks: ExecutingTask[] = [];
finishedTasks: FinishedTask[] = [];
- icon = 'fa-hourglass-o';
+ icons = Icons;
+ icon = _.join([this.icons.hourglass], ' ');
constructor(
private summaryService: SummaryService,
title="Remove the custom configuration value. The default configuration will be inherited and used instead."
(click)="resetValue(option.name)"
i18n-title>
- <i class="fa fa-eraser"
+ <i [ngClass]="[icons.erase]"
aria-hidden="true"></i>
</button>
</span>
import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { ConfigurationService } from '../../api/configuration.service';
import { CdFormGroup } from '../../forms/cd-form-group';
import { ConfigOptionTypes } from './config-option.types';
@Input()
optionsFormShowReset = true;
+ icons: Icons;
options: Array<any> = [];
optionsFormGroup: CdFormGroup = new CdFormGroup({});
<tr>
<td rowspan="2"
class="error-panel-alert-icon">
- <i class="fa fa-3x fa-times-circle alert-danger"
+ <i [ngClass]="[icons.destroyCircle, icons.large3x]" class="alert-danger"
aria-hidden="true"></i>
</td>
<td class="error-panel-alert-title">
import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-error-panel',
*/
@Output()
backAction = new EventEmitter();
+
+ icons = Icons;
}
i18n-title
title="Reset Settings"
(click)="reset()">
- <i class="fa fa-undo"></i>
+ <i [ngClass]="[icons.undo]"></i>
</button>
<br>
</div>
import { I18n } from '@ngx-translate/i18n-polyfill';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CephReleaseNamePipe } from '../../../shared/pipes/ceph-release-name.pipe';
import { SummaryService } from '../../../shared/services/summary.service';
import { SettingsService } from '../../api/settings.service';
dashboardExist = true;
time: string;
grafanaTimes: any;
+ icons = Icons;
readonly DEFAULT_TIME: string = 'from=now-1h&to=now';
@Input()
<div [innerHtml]="html"></div>
<ng-content></ng-content>
</ng-template>
-<i class="fa fa-question-circle"
+<i [ngClass]="[icons.questionCircle]"
aria-hidden="true"
[popover]="popoverTpl"
placement="bottom"
import { Component, Input } from '@angular/core';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-helper',
@Input()
html: any;
+ icons = Icons;
+
constructor() {}
}
<table>
<tr>
<td rowspan="2" class="info-panel-alert-icon">
- <i class="fa fa-3x fa-info-circle alert-info"
+ <i [ngClass]="[icons.infoCircle, icons.large3x]" class="alert-info"
aria-hidden="true"></i>
</td>
<td class="info-panel-alert-title">
import { Component, Input } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-info-panel',
@Input()
title = this.i18n('Information');
+ icons = Icons;
+
constructor(private i18n: I18n) {}
}
<alert type="info">
<strong>
- <i class="fa fa-spinner fa-spin fa-fw"
+ <i [ngClass]="[icons.spinner, icons.spin, icons.width]"
aria-hidden="true"></i>
</strong>
<ng-content></ng-content>
import { Component } from '@angular/core';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-loading-panel',
templateUrl: './loading-panel.component.html',
styleUrls: ['./loading-panel.component.scss']
})
-export class LoadingPanelComponent {}
+export class LoadingPanelComponent {
+ icons = Icons;
+}
[customBadgeValidators]="customBadgeValidators"
elemClass="margin-right-sm select-menu-edit"
(selection)="selection.emit($event)">
- <i class="fa fa-fw fa-pencil"></i>
+ <i [ngClass]="[icons.edit, icons.width]"></i>
</cd-select>
<span *ngFor="let dataItem of data">
<span class="margin-right-sm">{{ dataItem }}</span>
<a class="badge-remove"
(click)="cdSelect.removeItem(dataItem)">
- <i class="fa fa-times"
+ <i [ngClass]="[icons.destroy]"
aria-hidden="true"></i>
</a>
</span>
import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { SelectMessages } from '../select/select-messages.model';
import { SelectOption } from '../select/select-option.model';
@ViewChild('cdSelect')
cdSelect;
+ icons = Icons;
+
constructor(private i18n: I18n) {}
}
[ngClass]="{'help-block disabled': (data.length === selectionLimit || !option.enabled) && !option.selected}"
(click)="triggerSelection(option)">
<div class="select-menu-item-icon">
- <i class="fa fa-check"
+ <i [ngClass]="[icons.check]"
aria-hidden="true"
*ngIf="option.selected"></i>
class="select-menu-item"
(click)="addCustomOption(filter.value)">
<div class="select-menu-item-icon">
- <i class="fa fa-tag"
+ <i [ngClass]="[icons.tag]"
aria-hidden="true"></i>
</div>
import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdFormGroup } from '../../forms/cd-form-group';
import { SelectMessages } from './select-messages.model';
import { SelectOption } from './select-option.model';
filter: FormControl;
Object = Object;
filteredOptions: Array<SelectOption> = [];
+ icons = Icons;
constructor(private i18n: I18n) {}
(click)="submit($event)">
<ng-content></ng-content>
<span *ngIf="loading">
- <i class="fa fa-spinner fa-spin fa-fw"></i>
+ <i [ngClass]="[icons.spinner, icons.spin, icons.width]"></i>
</span>
</button>
import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { Icons } from '../../../shared/enum/icons.enum';
import * as _ from 'lodash';
disabled = false;
loading = false;
+ icons = Icons;
constructor(private elRef: ElementRef) {}
<table>
<tr>
<td rowspan="2" class="warning-panel-alert-icon">
- <i class="fa fa-3x fa-warning alert-warning"
+ <i [ngClass]="[icons.large3x, icons.warning]" class="alert-warning"
aria-hidden="true"></i>
</td>
<td class="warning-panel-alert-title">
import { Component, Input } from '@angular/core';
+import { Icons } from '../../../shared/enum/icons.enum';
@Component({
selector: 'cd-warning-panel',
*/
@Input()
title = 'Warning';
+
+ icons = Icons;
}
[ngClass]="{'disabled': disableSelectionAction(action)}"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)">
- <i class="fa fa-fw {{ action.icon }}"></i><span>{{ action.name }}</span>
+ <i [ngClass]="[action.icon, icons.width]"></i><span>{{ action.name }}</span>
</button>
</ng-container>
<button type="button"
<a class="dropdown-item"
(click)="useClickAction(action)"
[routerLink]="useRouterLink(action)">
- <i class="fa fa-fw {{ action.icon }}"></i><span>{{ action.name }}</span>
+ <i [ngClass]="[action.icon, icons.width]"></i><span>{{ action.name }}</span>
</a>
</li>
</ng-container>
import * as _ from 'lodash';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CdTableAction } from '../../models/cd-table-action';
import { CdTableSelection } from '../../models/cd-table-selection';
import { Permission } from '../../models/permissions';
// Array with all visible actions
dropDownActions: CdTableAction[] = [];
+ icons = Icons;
+
constructor() {}
ngOnInit() {
<!-- search -->
<div class="input-group">
<span class="input-group-addon">
- <i class="glyphicon glyphicon-search"></i>
+ <i [ngClass]="[icons.search]"></i>
</span>
<input class="form-control"
type="text"
<button type="button"
class="btn btn-default clear-input tc_clearInputBtn"
(click)="updateFilter(true)">
- <i class="icon-prepend fa fa-remove"></i>
+ <i class="icon-prepend {{ icons.destroy }}"></i>
</button>
</span>
</div>
<a dropdownToggle
class="btn btn-sm btn-default dropdown-toggle tc_columnBtn"
data-toggle="dropdown">
- <i class="fa fa-lg fa-table"></i>
+ <i [ngClass]="[icons.large, icons.table]"></i>
</a>
<ul *dropdownMenu
class="dropdown-menu">
<div class="widget-toolbar tc_refreshBtn"
*ngIf="fetchData.observers.length > 0">
<a (click)="refreshBtn()">
- <i class="fa fa-lg fa-refresh"
+ <i [ngClass]="[icons.large, icons.refresh]"
[class.fa-spin]="updating || loadingIndicator"></i>
</a>
</div>
<ng-template #checkIconTpl
let-value="value">
- <i class="fa fa-check fa-fw"
+ <i [ngClass]="[icons.check, icons.width]"
[hidden]="!value"></i>
</ng-template>
<ng-template #executingTpl
let-row="row"
let-value="value">
- <i class="fa fa-spinner fa-spin fa-fw"
+ <i [ngClass]="[icons.spinner, icons.width, icons.spin]"
*ngIf="row.cdExecuting"></i>
{{ value }}
<span *ngIf="row.cdExecuting"
import * as _ from 'lodash';
import { Observable, timer as observableTimer } from 'rxjs';
+import { Icons } from '../../../shared/enum/icons.enum';
import { CellTemplate } from '../../enum/cell-template.enum';
import { CdTableColumn } from '../../models/cd-table-column';
import { CdTableFetchDataContext } from '../../models/cd-table-fetch-data-context';
selection = new CdTableSelection();
tableColumns: CdTableColumn[];
+ icons = Icons;
cellTemplates: {
[key: string]: TemplateRef<any>;
} = {};
loadingIndicator = true;
loadingError = false;
paginationClasses = {
- pagerLeftArrow: 'i fa fa-angle-double-left',
- pagerRightArrow: 'i fa fa-angle-double-right',
- pagerPrevious: 'i fa fa-angle-left',
- pagerNext: 'i fa fa-angle-right'
+ pagerLeftArrow: Icons.leftArrowDouble,
+ pagerRightArrow: Icons.rightArrowDouble,
+ pagerPrevious: Icons.leftArrow,
+ pagerNext: Icons.rightArrow
};
userConfig: CdUserConfig = {};
tableName: string;
--- /dev/null
+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-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
+ clone = 'fa fa-clone', // clone
+ undo = 'fa fa-undo', // Rollback, Restore
+ search = 'fa fa-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
+ reweight = 'fa-balance-scale', // Reweight
+ left = 'fa fa-arrow-left', // Mark out
+ right = 'fa fa-arrow-right', // Mark in
+ down = 'fa fa-arrow-down', // Mark Down
+ erase = 'fa fa-eraser', // Purge
+ user = 'fa fa-user', // User, Initiators
+ 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',
+ check = 'fa fa-check', // Notification check
+ show = 'fa fa-eye', // Show
+ hourglass = 'fa fa-hourglass-o', // Task
+ filledHourglass = 'fa fa-hourglass', // Task
+ table = 'fa fa-table', // Table,
+ spinner = 'fa spinner', // spinner, Load
+ refresh = 'fa fa-refresh', // 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
+ signOut = 'fa fa-sign-out', // Sign Out
+ health = 'fa fa-heartbeat', // Health
+ circle = 'fa fa-circle', // Circle
+ bell = 'fa fa-bell', // Notification
+ 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
+ flag = 'fa fa-flag', // OSD configuration
+
+ /* Icons for special effect */
+ width = 'fa fa-fw', // set one or more icons to the same fixed width
+ 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
+ stack = 'fa fa-stack', // To stack multiple icons
+ stack1x = 'fa fa-stack-1x', // To stack regularly sized icon
+ stack2x = 'fa fa-stack-2x', // To stack regularly sized icon
+ pulse = 'fa fa-pulse', // To have spinner rotate with 8 steps
+ spin = 'fa fa-spin', // To get any icon to rotate
+ inverse = 'fa fa-inverse' // To get an alternative icon color
+}
expectObject(new CdNotification(), {
application: 'Ceph',
applicationClass: 'ceph-icon',
- iconClass: 'fa-info',
+ iconClass: 'fa fa-info',
message: undefined,
options: undefined,
textClass: 'text-info',
{
application: 'Prometheus',
applicationClass: 'prometheus-icon',
- iconClass: 'fa-exclamation-triangle',
+ iconClass: 'fa fa-exclamation-triangle',
message: 'Something failed',
options: undefined,
textClass: 'text-danger',
it('should expect the right success classes', () => {
expectObject(new CdNotification(new CdNotificationConfig(NotificationType.success)), {
- iconClass: 'fa-check',
+ iconClass: 'fa fa-check',
textClass: 'text-success'
});
});
import { ToastOptions } from 'ng2-toastr';
+import { Icons } from '../enum/icons.enum';
import { NotificationType } from '../enum/notification-type.enum';
export class CdNotificationConfig {
iconClass: string;
private textClasses = ['text-danger', 'text-info', 'text-success'];
- private iconClasses = ['fa-exclamation-triangle', 'fa-info', 'fa-check'];
+ private iconClasses = [Icons.warning, Icons.info, Icons.check];
constructor(private config: CdNotificationConfig = new CdNotificationConfig()) {
super(config.type, config.title, config.message, config.options, config.application);
import * as _ from 'lodash';
+import { Icons } from '../../shared/enum/icons.enum';
import { NotificationType } from '../enum/notification-type.enum';
import { CdNotificationConfig } from '../models/cd-notification';
import {
}
private appendSourceLink(alert: PrometheusCustomAlert, message: string): string {
- return `${message} <a href="${alert.url}" target="_blank"><i class="fa fa-line-chart"></i></a>`;
+ return `${message} <a href="${alert.url}" target="_blank"><i class="${
+ Icons.lineChart
+ }"></i></a>`;
}
}
import * as _ from 'lodash';
import { TableActionsComponent } from '../app/shared/datatable/table-actions/table-actions.component';
+import { Icons } from '../app/shared/enum/icons.enum';
import { CdFormGroup } from '../app/shared/forms/cd-form-group';
import { Permission } from '../app/shared/models/permissions';
import {
}
createLink(url) {
- return `<a href="${url}" target="_blank"><i class="fa fa-line-chart"></i></a>`;
+ return `<a href="${url}" target="_blank"><i class="${Icons.lineChart}"></i></a>`;
}
}
projects / ceph.git / commitdiff