cy.get('cd-mirroring-pools').within(() => {
this.getTableCell(this.poolsColumnIndex.name, poolName)
.parent()
- .find(`[cdstabledata]:nth-child(${this.poolsColumnIndex.health}) .badge`)
+ .find(`[cdstabledata]:nth-child(${this.poolsColumnIndex.health}) cds-tag`)
.should(($ele) => {
const newLabels = $ele.toArray().map((v) => v.innerText);
expect(newLabels).to.include(status);
if (add) {
cy.get('cd-modal').find('.select-menu-edit').click();
for (const label of labels) {
- cy.contains('cd-modal .badge', new RegExp(`^${label}$`)).should('not.exist');
+ cy.contains('cd-modal .tag', new RegExp(`^${label}$`)).should('not.exist');
cy.get('.popover-body input').type(`${label}{enter}`);
}
} else {
for (const label of labels) {
- cy.contains('cd-modal .badge', new RegExp(`^${label}$`))
- .find('.badge-remove')
+ cy.contains('cd-modal .tag', new RegExp(`^${label}$`))
+ .find('.tags-remove')
.click();
}
}
this.getTableCell(this.columnIndex.hostname, hostname, true).as('row').click();
cy.get('@row')
.parent()
- .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .badge`)
+ .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .tag`)
.should(($ele) => {
const newLabels = $ele.toArray().map((v) => v.innerText);
for (const label of labels) {
this.getTableCell(this.columnIndex.hostname, hostname, true)
.parent()
- .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`)
+ .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) cds-tag`)
.should(($ele) => {
const status = $ele.toArray().map((v) => v.innerText);
expect(status).to.include('maintenance');
this.getTableCell(this.columnIndex.hostname, hostname, true)
.parent()
- .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`)
+ .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .tag`)
.should(($ele) => {
const status = $ele.toArray().map((v) => v.innerText);
expect(status).to.include('maintenance');
checkStatus(id: number, status: string[]) {
this.searchTable(id.toString());
cy.wait(5 * 1000);
- cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`).should(($ele) => {
+ cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) cds-tag`).should(($ele) => {
const allStatus = $ele.toArray().map((v) => v.innerText);
for (const s of status) {
expect(allStatus).to.include(s);
cy.get('cd-service-daemon-list').within(() => {
this.getTableCell(daemonNameIndex, daemon, true)
.parent()
- .find(`[cdstabledata]:nth-child(${statusIndex}) .badge`)
+ .find(`[cdstabledata]:nth-child(${statusIndex}) cds-tag`)
.should(($ele) => {
const status = $ele.toArray().map((v) => v.innerText);
expect(status).to.include(expectedStatus);
this.getTableCell(this.columnIndex.entity, entityName)
.click()
.parent()
- .find(`[cdstabledata]:nth-child(${this.columnIndex.capabilities}) .badge`)
+ .find(`[cdstabledata]:nth-child(${this.columnIndex.capabilities}) cds-tag`)
.should(($ele) => {
const newCaps = $ele.toArray().map((v) => v.innerText);
for (const cap of capabilities) {
if (options) {
cy.get('.cds--search-input').first().clear().type(row);
for (const option of options.split(',')) {
- cy.contains(`[cdstablerow] [cdstabledata] .badge`, option).should('exist');
+ cy.contains(`[cdstablerow] [cdstabledata] .tag`, option).should('exist');
}
}
});
if (options) {
cy.get('.cds--search-input').first().clear().type(row);
for (const option of options.split(',')) {
- cy.contains(`[cdstablerow] [cdstabledata] .badge`, option).should('not.exist');
+ cy.contains(`[cdstablerow] [cdstabledata] .tag`, option).should('not.exist');
}
}
});
this.getTableCell(aliasIndex, alias)
.parent()
- .find(`[cdstabledata]:nth-child(${statusIndex}) .badge`)
+ .find(`[cdstabledata]:nth-child(${statusIndex}) cds-tag`)
.should(($ele) => {
const status = $ele.toArray().map((v) => v.innerText);
expect(status).to.include(expectedStatus);
this.searchTable(group_id);
cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status})`)
- .find('.badge-warning')
+ .find('.tag-warning')
.should('contain', status);
}
SelectModule,
UIShellModule,
TreeviewModule,
- TabsModule
+ TabsModule,
+ TagModule
} from 'carbon-components-angular';
// Icons
ModalModule,
DatePickerModule,
ComboBoxModule,
- TabsModule
+ TabsModule,
+ TagModule
],
declarations: [
RbdListComponent,
<i [class]="node?.cdIcon"></i>
<span>{{ node?.name }}</span>
- <span class="badge"
- [ngClass]="{'badge-success': ['logged_in'].includes(node?.status), 'badge-danger': ['logged_out'].includes(node?.status)}">
+ <cds-tag [class]="{'tag-success': ['logged_in'].includes(node?.status), 'tag-danger': ['logged_out'].includes(node?.status)}">
{{ node?.status }}
- </span>
+ </cds-tag>
</ng-template>
</div>
name: $localize`State`,
prop: 'state',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- up: { class: 'badge-success' },
- down: { class: 'badge-danger' }
+ up: { class: 'tag-success' },
+ down: { class: 'tag-danger' }
}
}
},
<ng-template #healthTmpl
let-row="data.row"
let-value="data.value">
- <span [ngClass]="row.health_color | mirrorHealthColor">{{ value }}</span>
+ <cds-tag [class]="row.health_color | mirrorHealthColor">{{ value }}</cds-tag>
</ng-template>
<ng-template #stateTmpl
let-row="data.row"
let-value="data.value">
- <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
+
+<cds-tag size="sm"
+ [class]="row.state_color | mirrorHealthColor">{{ value }}</cds-tag>
+
</ng-template>
<ng-template #progressTmpl
});
it('transforms "warning"', () => {
- expect(pipe.transform('warning')).toBe('badge badge-warning');
+ expect(pipe.transform('warning')).toBe('tag-warning');
});
it('transforms "error"', () => {
- expect(pipe.transform('error')).toBe('badge badge-danger');
+ expect(pipe.transform('error')).toBe('tag-danger');
});
it('transforms "success"', () => {
- expect(pipe.transform('success')).toBe('badge badge-success');
+ expect(pipe.transform('success')).toBe('tag-success');
});
it('transforms others', () => {
- expect(pipe.transform('abc')).toBe('badge badge-info');
+ expect(pipe.transform('abc')).toBe('tag-info');
});
});
export class MirrorHealthColorPipe implements PipeTransform {
transform(value: any): any {
if (value === 'warning') {
- return 'badge badge-warning';
+ return 'tag-warning';
} else if (value === 'error') {
- return 'badge badge-danger';
+ return 'tag-danger';
} else if (value === 'success') {
- return 'badge badge-success';
+ return 'tag-success';
}
- return 'badge badge-info';
+ return 'tag-info';
}
}
IconService,
InputModule,
ModalModule,
- SelectModule
+ SelectModule,
+ TagModule
} from 'carbon-components-angular';
// Icons
SelectModule,
GridModule,
ButtonModule,
- IconModule
+ IconModule,
+ TagModule
],
declarations: [
BootstrapCreateModalComponent,
<ng-template #healthTmpl
let-row="data.row"
let-value="data.value">
- <span [ngClass]="row.health_color | mirrorHealthColor">{{ value }}</span>
+ <cds-tag [class]="row.health_color | mirrorHealthColor">
+ {{ value }}
+ </cds-tag>
</ng-template>
<ng-template #localTmpl>
<span i18n
<ng-template #statusTpl
let-row="data.row">
- <span class="badge"
- [ngClass]="row | pipeFunction:getStatusClass">
+ <cds-tag [class]="row | pipeFunction:getStatusClass">
{{ row.status_desc }}
- </span>
+</cds-tag>
</ng-template>
<cds-tabs
getStatusClass(row: Gateway): string {
return _.get(
{
- '-1': 'badge-danger',
- '0': 'badge-warning',
- '1': 'badge-success'
+ '-1': 'tag-danger',
+ '0': 'tag-warning',
+ '1': 'tag-success'
},
row.status,
- 'badge-dark'
+ 'tag-dark'
);
}
class="bold">Features</td>
<td>
<span *ngFor="let feature of selection.features_name">
- <span class="badge badge-dark me-2">{{ feature }}</span>
+ <cds-tag class="tag-dark me-2">{{ feature }}</cds-tag>
</span>
</td>
</tr>
<ng-template #mirroringTpl
let-value="data.value"
let-row="data.row">
- <span *ngIf="value?.length === 3; else probb"
- class="badge badge-info">{{ value[0] }}</span>
- <span *ngIf="value?.length === 3"
- class="badge badge-info">{{ value[1] }}</span>
- <span *ngIf="row?.primary === true"
- class="badge badge-info"
- i18n>primary</span>
- <span *ngIf="row?.primary === false"
- class="badge badge-info"
- i18n>secondary</span>
+ <cds-tag *ngIf="value?.length === 3; else probb"
+ class="tag-info">
+ {{ value[0] }}
+ </cds-tag>
+ <cds-tag *ngIf="value?.length === 3"
+ class="tag-info">
+ {{ value[1] }}
+ </cds-tag>
+ <cds-tag *ngIf="row?.primary === true"
+ class="tag-info"
+ i18n>
+ primary
+ </cds-tag>
+ <cds-tag *ngIf="row?.primary === false"
+ class="tag-info"
+ i18n>
+ secondary
+ </cds-tag>
<ng-template #probb>
- <span class="badge badge-info">{{ value }}</span>
+ <cds-tag class="tag-info">
+ {{ value }}
+ </cds-tag >
</ng-template>
</ng-template>
<ng-template #ScheduleTpl
let-value="data.value"
let-row="data.row">
- <span *ngIf="value?.length === 3"
- class="badge badge-info">{{ value[2] | cdDate }}</span>
+ <cds-tag *ngIf="value?.length === 3"
+ class="tag-info">
+ {{ value[2] | cdDate }}
+ </cds-tag>
</ng-template>
<ng-template #flattenTpl
name: $localize`State`,
prop: 'is_protected',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- true: { value: $localize`PROTECTED`, class: 'badge-success' },
- false: { value: $localize`UNPROTECTED`, class: 'badge-info' }
+ true: { value: $localize`PROTECTED`, class: 'tag-success' },
+ false: { value: $localize`UNPROTECTED`, class: 'tag-info' }
}
}
},
<ng-template #modeToHumanReadableTpl
let-value="data.value">
- <span *ngFor="let result of (value | octalToHumanReadable)"
- [ngClass]="result.class"
- [ngbTooltip]="result.toolTip">
+ <cds-tag *ngFor="let result of (value | octalToHumanReadable)"
+ [class]="result.class"
+ [ngbTooltip]="result.toolTip">
{{ result.content }}
- </span>
+</cds-tag>
</ng-template>
name: $localize`Data Pool`,
prop: 'info.data_pool',
flexGrow: 0.7,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-background-primary'
+ class: 'tag-background-primary'
}
},
{
<ng-template #modeToHumanReadableTpl
let-value="data.value">
- <span *ngFor="let result of (value | octalToHumanReadable)"
- [ngClass]="result.class"
- [ngbTooltip]="result.toolTip">
+ <cds-tag *ngFor="let result of (value | octalToHumanReadable)"
+ [class]="result.class"
+ [ngbTooltip]="result.toolTip">
{{ result.content }}
- </span>
+</cds-tag>
</ng-template>
<ng-template #nameTpl
name: $localize`Data Pool`,
prop: 'info.data_pool',
flexGrow: 0.7,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-background-primary'
+ class: 'tag-background-primary'
}
},
{
name: $localize`Pending Clones`,
prop: 'info.has_pending_clones',
flexGrow: 0.5,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- no: { class: 'badge-success' },
- yes: { class: 'badge-info' }
+ no: { class: 'tag-success' },
+ yes: { class: 'tag-info' }
}
}
}
<ng-container ngbNavItem="clients">
<a ngbNavLink>
<ng-container i18n>Clients</ng-container>
- <span class="badge badge-pill badge-tab ms-1">{{ clients.data.length }}</span>
+ <cds-tag class="ms-1">{{ clients.data.length }}</cds-tag>
</a>
<ng-template ngbNavContent>
<cd-cephfs-clients
import { MultiClusterListComponent } from './multi-cluster/multi-cluster-list/multi-cluster-list.component';
import { DashboardV3Module } from '../dashboard-v3/dashboard-v3.module';
import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-details/multi-cluster-details.component';
-import { TextLabelListComponent } from '~/app/shared/components/text-label-list/text-label-list.component';
@NgModule({
imports: [
ListModule,
ToggletipModule,
IconModule,
- TagModule,
- TextLabelListComponent
+ TagModule
],
declarations: [
MonitorComponent,
<td>
<span *ngFor="let flag of selection.flags">
<span title="{{ flags[flag] }}">
- <span class="badge badge-dark me-2">{{ flag | uppercase }}</span>
+ <cds-tag class="tag-dark me-2">{{ flag | uppercase }}</cds-tag>
</span>
</span>
</td>
</tr>
<tr>
<td i18n
- class="bold">Services</td>
+ class="bold">
+ Services
+ </td>
<td>
<span *ngFor="let service of selection.services">
- <span class="badge badge-dark me-2">{{ service }}</span>
+ <cds-tag
+ *ngIf="service"
+ class="tag-dark me-2">
+ {{ service }}
+ </cds-tag>
</span>
</td>
</tr>
<div class="cd-col-form-input">
<span *ngFor="let service of configForm.getValue('services')"
class="form-component-badge">
- <span class="badge badge-dark">{{ service }}</span>
+ <cds-tag [size]="'md'"
+ class="tag-dark">
+ {{ service }}
+ </cds-tag>
</span>
</div>
</div>
</ng-container>
</cds-tree-node>
</ng-template>
- <ng-template #badge
+ <ng-template #tag
let-data>
- <span *ngIf="data?.status"
- class="badge"
- [ngClass]="{'badge-success': ['in', 'up'].includes(data?.status), 'badge-danger': ['down', 'out', 'destroyed'].includes(data?.status)}">
- {{ data.status }}
- </span>
+ <cds-tag *ngIf="data?.status"
+ [class]="getStatusClasses(data.status)">
+ {{ data?.status }}
+ </cds-tag>
<span> </span>
<span class="node-name"
[ngClass]="{'type-osd': data?.type === 'osd'}"
private sub = new Subscription();
@ViewChild('tree') tree: TreeViewComponent;
- @ViewChild('
badge') labelTpl: TemplateRef<any>;
+ @ViewChild('
tag') labelTpl: TemplateRef<any>;
icons = Icons;
loadingIndicator = true;
delete this.metadataTitle;
}
}
+
+ getStatusClasses(status: string): string {
+ if (['in', 'up'].includes(status)) {
+ return 'tag-success ';
+ }
+ if (['down', 'out', 'destroyed'].includes(status)) {
+ return 'tag-danger';
+ }
+ return '';
+ }
}
TableActionHelper
} from '~/testing/unit-test-helper';
import { HostsComponent } from './hosts.component';
+import { TagModule } from 'carbon-components-angular';
class MockShowForceMaintenanceModal {
showModal = false;
RouterTestingModule,
ToastrModule.forRoot(),
CephModule,
- CoreModule
+ CoreModule,
+ TagModule
],
providers: [
{ provide: AuthStorageService, useValue: fakeAuthStorageService },
name: $localize`Labels`,
prop: 'labels',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-dark'
+ class: 'tag-dark'
}
},
{
name: $localize`Status`,
prop: 'status',
flexGrow: 0.8,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- maintenance: { class: 'badge-warning' },
- available: { class: 'badge-success' }
+ maintenance: { class: 'tag-warning' },
+ available: { class: 'tag-success' }
}
}
},
name: $localize`Type`,
prop: 'human_readable_type',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- hdd: { value: 'HDD', class: 'badge-hdd' },
- ssd: { value: 'SSD', class: 'badge-ssd' }
+ hdd: { value: 'HDD', class: 'tag-hdd' },
+ ssd: { value: 'SSD', class: 'tag-ssd' }
}
}
},
name: $localize`OSDs`,
prop: 'osd_ids',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-dark',
+ class: 'tag-dark',
prefix: 'osd.'
}
}
prop: 'cluster_connection_status',
name: $localize`Connection`,
flexGrow: 2,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- 1: { value: 'DISCONNECTED', class: 'badge-danger' },
- 0: { value: 'CONNECTED', class: 'badge-success' },
- 2: { value: 'CHECKING..', class: 'badge-info' }
+ 1: { value: 'DISCONNECTED', class: 'tag-danger' },
+ 0: { value: 'CONNECTED', class: 'tag-success' },
+ 2: { value: 'CHECKING..', class: 'tag-info' }
}
}
},
prop: 'cluster_connection_status',
name: $localize`Connection`,
flexGrow: 2,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- 1: { value: 'DISCONNECTED', class: 'badge-danger' },
- 0: { value: 'CONNECTED', class: 'badge-success' },
- 2: { value: 'CHECKING..', class: 'badge-info' }
+ 1: { value: 'DISCONNECTED', class: 'tag-danger' },
+ 0: { value: 'CONNECTED', class: 'tag-success' },
+ 2: { value: 'CHECKING..', class: 'tag-info' }
}
}
},
prop: 'status',
name: $localize`Status`,
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- 1: { value: 'WARN', class: 'badge-warning' },
- 0: { value: 'OK', class: 'badge-success' },
- 2: { value: 'ERROR', class: 'badge-danger' }
+ 1: { value: 'WARN', class: 'tag-warning' },
+ 0: { value: 'OK', class: 'tag-success' },
+ 2: { value: 'ERROR', class: 'tag-danger' }
}
}
},
<ng-template #blockClearDevices>
<div class="pb-2 my-2 border-bottom">
<span *ngFor="let filter of appliedFilters">
- <span class="badge badge-dark me-2">{{ filter.name }}: {{ filter.value.formatted }}</span>
+ <cds-tag class="tag-dark me-2">{{ filter.name }}: {{ filter.value.formatted }}</cds-tag>
</span>
<a class="tc_clearSelections"
href=""
size="slim"
[showTitle]="false">
<ng-container i18n>At least one of these filters must be applied in order to proceed:</ng-container>
- <span *ngFor="let filter of requiredFilters"
- class="badge badge-dark ms-2">
- {{ filter }}
- </span>
+ <cds-tag *ngFor="let filter of requiredFilters"
+ class="tag-dark ms-2">
+ {{ filter }}
+ </cds-tag>
</cd-alert-panel>
<cd-inventory-devices #inventoryDevices
[devices]="devices"
[for]="flag.code"
ng-class="['tc_' + key]">
<strong>{{ flag.name }}</strong>
- <span class="badge badge-hdd ms-2"
- [ngbTooltip]="clusterWideTooltip"
- *ngIf="flag.clusterWide"
- i18n>Cluster-wide</span>
+ <cds-tag class="tag-hdd ms-2"
+ [ngbTooltip]="clusterWideTooltip"
+ *ngIf="flag.clusterWide"
+ i18n>Cluster-wide</cds-tag>
<br>
<span class="form-text text-muted">{{ flag.description }}</span>
</label>
<ng-template #flagsTpl
let-row="data.row">
- <span *ngFor="let flag of row.cdClusterFlags;"
- class="badge badge-hdd me-1">{{ flag }}</span>
- <span *ngFor="let flag of row.cdIndivFlags;"
- class="badge badge-info me-1">{{ flag }}</span>
+ <cds-tag *ngFor="let flag of row.cdClusterFlags;"
+ class="tag-hdd me-1">
+ {{ flag }}
+ </cds-tag>
+ <cds-tag *ngFor="let flag of row.cdIndivFlags;"
+ class="tag-info me-1">
+ {{ flag }}
+ </cds-tag>
</ng-template>
<ng-template #osdUsageTpl
prop: 'collectedStates',
name: $localize`Status`,
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- in: { class: 'badge-success' },
- up: { class: 'badge-success' },
- down: { class: 'badge-danger' },
- out: { class: 'badge-danger' },
- destroyed: { class: 'badge-danger' }
+ in: { class: 'tag-success' },
+ up: { class: 'tag-success' },
+ down: { class: 'tag-danger' },
+ out: { class: 'tag-danger' },
+ destroyed: { class: 'tag-danger' }
}
}
},
prop: 'tree.device_class',
name: $localize`Device class`,
flexGrow: 1.2,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- hdd: { class: 'badge-hdd' },
- ssd: { class: 'badge-ssd' }
+ hdd: { class: 'tag-hdd' },
+ ssd: { class: 'tag-ssd' }
}
}
},
name: $localize`Severity`,
prop: 'labels.severity',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- critical: { class: 'badge-danger' },
- warning: { class: 'badge-warning' }
+ critical: { class: 'tag-danger' },
+ warning: { class: 'tag-warning' }
}
}
},
name: $localize`State`,
prop: 'status.state',
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- active: { class: 'badge-info' },
- unprocessed: { class: 'badge-warning' },
- suppressed: { class: 'badge-dark' }
+ active: { class: 'tag-info' },
+ unprocessed: { class: 'tag-warning' },
+ suppressed: { class: 'tag-dark' }
}
}
},
ariaCurrentWhenActive="page"
[routerLinkActiveOptions]="{exact: true}"
i18n>Active Alerts
- <small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
- class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
- <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
- class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small></a>
+ <cds-tag *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
+ class="tag-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</cds-tag>
+ <cds-tag *ngIf="prometheusAlertService.activeWarningAlerts > 0"
+ class="tag-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</cds-tag></a>
</li>
<li class="nav-item">
<a class="nav-link"
prop: 'labels.severity',
name: $localize`Severity`,
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- critical: { class: 'badge-danger' },
- warning: { class: 'badge-warning' }
+ critical: { class: 'tag-danger' },
+ warning: { class: 'tag-warning' }
}
}
},
prop: 'group',
name: $localize`Group`,
flexGrow: 1,
- cellTransformation: CellTemplate.badge
+ cellTransformation: CellTemplate.tag
},
{ prop: 'duration', name: $localize`Duration`, pipe: new DurationPipe(), flexGrow: 1 },
{ prop: 'query', name: $localize`Query`, isHidden: true, flexGrow: 1 },
selection = new CdTableSelection();
modalRef: NgbModalRef;
customCss = {
- 'badge badge-danger': 'active',
- 'badge badge-warning': 'pending',
- 'badge badge-default': 'expired'
+ 'tag-danger': 'active',
+ 'tag-warning': 'pending',
+ 'tag-default': 'expired'
};
sorts: CdSortPropDir[] = [{ prop: 'endsAt', dir: CdSortDirection.desc }];
rules: PrometheusRule[];
name: $localize`Alerts Silenced`,
prop: 'silencedAlerts',
flexGrow: 3,
- cellTransformation: CellTemplate.badge
+ cellTransformation: CellTemplate.tag
},
{
name: $localize`Created by`,
<ng-template #statusTpl
let-row="data.row">
- <span class="badge"
- [ngClass]="row | pipeFunction:getStatusClass">
+ <cds-tag *ngIf="row.status_desc"
+ [class]="row | pipeFunction:getStatusClass">
{{ row.status_desc }}
- </span>
+</cds-tag>
</ng-template>
<ng-template #listTpl
<li class="list-group-item"
*ngFor="let event of events; trackBy:trackByFn">
<b>{{ event.created | relativeDate }} - </b>
- <span class="badge badge-info">{{ event.subject }}</span><br>
+ <cds-tag class="tag-info">{{ event.subject }}</cds-tag><br>
<span *ngIf="event.level === 'INFO'">
<i [ngClass]="[icons.infoCircle]"
aria-hidden="true"></i>
getStatusClass(row: Daemon): string {
return _.get(
{
- '-1': 'badge-danger',
- '0': 'badge-warning',
- '1': 'badge-success'
+ '-1': 'tag-danger',
+ '0': 'tag-warning',
+ '1': 'tag-success'
},
row.status,
- 'badge-dark'
+ 'tag-dark'
);
}
import { DashboardTimeSelectorComponent } from './dashboard-time-selector/dashboard-time-selector.component';
import { DashboardV3Component } from './dashboard/dashboard-v3.component';
import { PgSummaryPipe } from './pg-summary.pipe';
-import { InlineLoadingModule, ToggletipModule } from 'carbon-components-angular';
+import { InlineLoadingModule, ToggletipModule, TagModule } from 'carbon-components-angular';
@NgModule({
imports: [
SimplebarAngularModule,
BaseChartDirective,
ToggletipModule,
- InlineLoadingModule
+ InlineLoadingModule,
+ TagModule
],
declarations: [
DashboardV3Component,
</dd>
<ng-container>
<dt>Telemetry Dashboard
- <span
- class="badge"
- [ngClass]="telemetryEnabled ? 'badge-success' : 'badge-secondary'"
- [ngbTooltip]="getTelemetryText()" >
+ <cds-tag *ngIf="telemetryEnabled !== null"
+ [class]="telemetryEnabled ? 'tag-success' : 'tag-secondary'"
+ [size]="'md'"
+ [ngbTooltip]="getTelemetryText()">
{{ telemetryEnabled ? 'Active' : 'Inactive' }}
- </span>
+ </cds-tag>
</dt>
<dd>
<a target="_blank"
{
prop: 'data_protection',
name: $localize`Data Protection`,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-background-gray'
+ class: 'tag-background-gray'
},
flexGrow: 1.3
},
{
prop: 'application_metadata',
name: $localize`Applications`,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
- class: 'badge-background-primary'
+ class: 'tag-background-primary'
},
flexGrow: 1.5
},
<div [cdsStack]="'horizontal'"
*ngFor="let rule of item.value.FilterRule">
<cds-tag size="sm"
- class="badge-background-gray">{{ rule.Name }}: {{ rule.Value }}</cds-tag>
+ class="tag-background-gray">{{ rule.Name }}: {{ rule.Value }}</cds-tag>
</div>
<br>
</ng-container>
<ng-container *ngIf="events && events.length">
<cds-tag *ngFor="let event of events"
size="sm"
- class="badge-background-primary">
+ class="tag-background-primary">
{{ event }}
</cds-tag>
</ng-container>
<i [ngClass]="node?.data?.icon"></i>
{{ node?.data?.name }}
</span>
- <span class="badge badge-success me-2"
- *ngIf="node?.data?.is_default">
+ <cds-tag class="tag-success me-2"
+ *ngIf="node?.data?.is_default">
default
- </span>
- <span class="badge badge-warning me-2"
- *ngIf="node?.data?.is_master"> master </span>
- <span class="badge badge-warning me-2"
- *ngIf="node?.data?.secondary_zone">
+ </cds-tag>
+ <cds-tag class="tag-warning me-2"
+ *ngIf="node?.data?.is_master"> master </cds-tag>
+ <cds-tag class="tag-warning me-2"
+ *ngIf="node?.data?.secondary_zone">
secondary-zone
- </span>
+ </cds-tag>
</div>
<div class="btn-group align-inline-btns"
[ngStyle]="{'visibility': activeNodeId === node?.data?.id ? 'visible' : 'hidden'}"
cellTransformation: CellTemplate.tooltip,
customTemplateConfig: {
map: {
- Enabled: { class: 'badge-success', tooltip: 'sync is allowed and enabled' },
- Allowed: { class: 'badge-info', tooltip: 'sync is allowed' },
+ Enabled: { class: 'tag-success', tooltip: 'sync is allowed and enabled' },
+ Allowed: { class: 'tag-info', tooltip: 'sync is allowed' },
Forbidden: {
- class: 'badge-warning',
+ class: 'tag-warning',
tooltip:
'sync (as defined by this group) is not allowed and can override other groups'
}
<ul class="me-2">
<ng-template #upToDateTpl>
- <li class="badge badge-success"
- i18n>Up to Date</li>
+ <li i18n>
+ <cds-tag class="tag-success">Up to Date</cds-tag>
+ </li>
</ng-template>
<cds-toggletip [dropShadow]="true"
[align]="align">
i18n>
Last Synced:
</li>
- <li class="badge badge-info"
- *ngIf="zone.timestamp; else upToDateTpl">{{ zone.timestamp | relativeDate }}</li>
+ <li *ngIf="zone.timestamp; else upToDateTpl">
+ <cds-tag class="tag-info">
+ {{ zone.timestamp | relativeDate }}
+ </cds-tag>
+ </li>
</ul>
timestamp: null
};
fixture.detectChanges();
- const upToDateBadge = fixture.debugElement.query(By.css('.badge-success'));
+ const upToDateBadge = fixture.debugElement.query(By.css('cds-tag.tag-success'));
expect(upToDateBadge).toBeTruthy();
expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date');
});
const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold'));
expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:');
- const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info'));
- expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago');
+ const lastSyncedTimestamp = fixture.debugElement.query(By.css('cds-tag.tag-info'));
+ expect(lastSyncedTimestamp.nativeElement.textContent.trim()).toEqual('10 minutes ago');
}));
it('should display sync status in the popover', () => {
<span *ngIf="metadataSyncInfo !== 'no sync (zone is master)'">
<ul class="me-2">
<ng-template #upToDateTpl>
- <li class="badge badge-success"
- i18n>Up to Date</li>
+ <li i18n>
+ <cds-tag class="tag-success">
+ Up to Date
+ </cds-tag>
+ </li>
</ng-template>
<cds-toggletip [dropShadow]="true"
[align]="align">
i18n>
Last Synced:
</li>
- <li class="badge badge-info"
- *ngIf="metadataSyncInfo.timestamp; else upToDateTpl">{{ metadataSyncInfo.timestamp | relativeDate }}</li>
+ <li *ngIf="metadataSyncInfo.timestamp; else upToDateTpl">
+ <cds-tag class="tag-info">
+ {{ metadataSyncInfo.timestamp | relativeDate }}
+ </cds-tag>
+ </li>
</ul>
</span>
timestamp: null
};
fixture.detectChanges();
- const upToDateBadge = fixture.debugElement.query(By.css('.badge-success'));
+ const upToDateBadge = fixture.debugElement.query(By.css('cds-tag'));
expect(upToDateBadge).toBeTruthy();
- expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date');
+ expect(upToDateBadge.nativeElement.classList).toContain('tag-success');
+ expect(upToDateBadge.nativeElement.textContent.trim()).toEqual('Up to Date');
});
it('should display correct sync status and last synced time', () => {
const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold'));
expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:');
- const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info'));
- expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago');
+ const lastSyncedTimestamp = fixture.debugElement.query(By.css('cds-tag'));
+ expect(lastSyncedTimestamp.nativeElement.classList).toContain('tag-info');
+ expect(lastSyncedTimestamp.nativeElement.textContent.trim()).toEqual('10 minutes ago');
});
it('should display sync status in the popover', () => {
+
<ul class="pb-5">
- <li><i [ngClass]="[icons.large2x, icons.reweight]"
- class="pt-2"></i></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>
- <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 class="badge badge-info mt-2">{{zone}}</li>
+ <li>
+ <i [ngClass]="[icons.large2x, icons.reweight]"
+ class="pt-2"></i>
+ </li>
+
+ <li class="mt-2">
+ <cds-tag class="tag-info">{{ realm }}</cds-tag>
+ </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 class="mt-2">
+ <cds-tag class="tag-info">{{ zonegroup }}</cds-tag>
+ </li>
+
+ <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 class="mt-2">
+ <cds-tag class="tag-info">{{ zone }}</cds-tag>
+ </li>
</ul>
component.zone = 'Zone';
fixture.detectChanges();
- const realmBadge = fixture.debugElement.query(By.css('li:nth-child(2)'));
+ const realmBadge = fixture.debugElement.query(By.css('cds-tag.tag-info'));
expect(realmBadge.nativeElement.textContent).toContain('Realm');
- const zonegroupBadge = fixture.debugElement.query(By.css('p'));
+ const zonegroupBadge = fixture.debugElement.queryAll(By.css('cds-tag.tag-info'))[1];
expect(zonegroupBadge.nativeElement.textContent).toContain('Zonegroup');
const zoneBadge = fixture.debugElement.query(By.css('li:nth-child(8)'));
prop: 'state',
name: $localize`State of Health`,
flexGrow: 1,
- cellTransformation: CellTemplate.badge,
+ cellTransformation: CellTemplate.tag,
customTemplateConfig: {
map: {
- good: { value: $localize`Good`, class: 'badge-success' },
- warning: { value: $localize`Warning`, class: 'badge-warning' },
- bad: { value: $localize`Bad`, class: 'badge-danger' },
- stale: { value: $localize`Stale`, class: 'badge-info' },
- unknown: { value: $localize`Unknown`, class: 'badge-dark' }
+ good: { value: $localize`Good`, class: 'tag-success' },
+ warning: { value: $localize`Warning`, class: 'tag-warning' },
+ bad: { value: $localize`Bad`, class: 'tag-danger' },
+ stale: { value: $localize`Stale`, class: 'tag-info' },
+ unknown: { value: $localize`Unknown`, class: 'tag-dark' }
}
}
},
DialogModule,
GridModule,
BreadcrumbModule,
- ModalModule
+ ModalModule,
+ TagModule
} from 'carbon-components-angular';
import { AppRoutingModule } from '~/app/app-routing.module';
DialogModule,
GridModule,
BreadcrumbModule,
- ModalModule
+ ModalModule,
+ TagModule
],
declarations: [
AboutComponent,
class="tc_submenuitem tc_submenuitem_block_mirroring">
<span i18n>Mirroring
<cds-tag *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
- class="tag-warning content-theme">
+ class="tag-warning">
{{ summaryData?.rbd_mirroring?.warnings }}
</cds-tag>
<cds-tag *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
- class="tag-danger content-theme">
+ class="tag-danger">
{{ summaryData?.rbd_mirroring?.errors }}
</cds-tag>
</span>
<span i18n>
<ng-container>Alerts</ng-container>
<cds-tag *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
- class="tag-danger ms-1 content-theme">{{ prometheusAlertService.activeCriticalAlerts }}</cds-tag>
+ class="tag-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</cds-tag>
<cds-tag *ngIf="prometheusAlertService.activeWarningAlerts > 0"
- class="tag-warning ms-1 content-theme">{{ prometheusAlertService.activeWarningAlerts }}</cds-tag>
+ class="tag-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</cds-tag>
</span>
</cds-sidenav-item>
</cds-sidenav-menu>
</h4>
<h4 *ngIf="cardType === 'zone'"
class="text-center mt-4 mb-0">
- <i [ngClass]="icons.deploy"></i>
- <span class="badge badge-info">{{ cardTitle }}</span>
+ <svg [cdsIcon]="icons.deploy"
+ [size]="icons.size20"
+ ></svg>
+ <cds-tag class="tag-info">{{ cardTitle }}</cds-tag>
</h4>
<h5 *ngIf="cardType === 'syncCards'"
class="text-center card-title">
-<span *ngIf="!key; else key_value"
- class="badge badge-{{value}}"
- ngClass="{{value | colorClassFromText}}"
- [ngbTooltip]="tooltipText">
+<cds-tag *ngIf="!key; else key_value"
+ class="tags-{{value}}"
+ ngClass="{{value | colorClassFromText}}"
+ [ngbTooltip]="tooltipText">
{{ value }}
-</span>
+</cds-tag>
<ng-template #key_value>
- <span class="badge badge-background-primary badge-{{key}}-{{value}}">
+ <cds-tag class="tag-background-primary badge-{{key}}-{{value}}">
{{ key }}: {{ value }}
- </span>
+ </cds-tag>
</ng-template>
})
export class ColorClassFromTextPipe implements PipeTransform {
readonly cssClasses: string[] = [
- 'badge-cd-label-green',
- 'badge-cd-label-cyan',
- 'badge-cd-label-purple',
- 'badge-cd-label-light-blue',
- 'badge-cd-label-gold',
- 'badge-cd-label-light-green'
+ 'tag-cd-label-green',
+ 'tag-cd-label-cyan',
+ 'tag-cd-label-purple',
+ 'tag-cd-label-light-blue',
+ 'tag-cd-label-gold',
+ 'tag-cd-label-light-green'
];
transform(text: string): string {
SelectModule,
ComboBoxModule,
ProgressIndicatorModule,
- InlineLoadingModule
+ InlineLoadingModule,
+ TagModule
} from 'carbon-components-angular';
import { MotdComponent } from '~/app/shared/components/motd/motd.component';
ComboBoxModule,
ProgressIndicatorModule,
BaseChartDirective,
- InlineLoadingModule
+ InlineLoadingModule,
+ TagModule
],
declarations: [
SparklineComponent,
</cd-select>
<span *ngFor="let dataItem of data">
- <span class="badge badge-dark me-2">
+ <cds-tag class="tag-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="tags-remove"
+ (click)="cdSelect.removeItem(dataItem)">
+ <svg [cdsIcon]="icons.destroy"
+ [size]="icons.size20"
+ class="cds-white"></svg>
</a>
- </span>
+ </cds-tag>
</span>
@use './src/styles/vendor/variables' as vv;
-.badge-remove {
+.tags-remove {
color: vv.$white;
}
</cd-table>
</ng-container>
-<ng-template #badgeDictTpl
+<ng-template #tagDictTpl
let-value="data.value">
<span *ngFor="let instance of value | keyvalue; last as isLast">
- <span class="badge badge-background-primary" >{{ instance.key }}: {{ instance.value }}</span>
+ <cds-tag class="tag-background-primary" >{{ instance.key }}: {{ instance.value }}</cds-tag>
<ng-container *ngIf="!isLast"> </ng-container>
</span>
</ng-template>
styleUrls: ['./crud-table.component.scss']
})
export class CRUDTableComponent implements OnInit {
- @ViewChild('badgeDictTpl')
- public
badgeDictTpl: TemplateRef<any>;
+ @ViewChild('tagDictTpl')
+ public
tagDictTpl: TemplateRef<any>;
@ViewChild('dateTpl')
public dateTpl: TemplateRef<any>;
@ViewChild('durationTpl')
);
this.permission = this.permissions[toCamelCase(meta.permissions[0])];
const templates = {
- badgeDict: this.badgeDictTpl,
+ badgeDict: this.tagDictTpl,
date: this.dateTpl,
duration: this.durationTpl
};
<span *ngIf="row.cdExecuting"
[ngClass]="column?.customTemplateConfig?.executingClass ? column?.customTemplateConfig.executingClass : 'text-muted italic'">({{ row.cdExecuting }})</span>
</ng-template>
-
<ng-template #classAddingTpl
let-value="data.value">
- <span class="{{ value | pipeFunction:useCustomClass:this }}">{{ value }}</span>
+ <span *ngIf="value">
+ <span *ngIf="!(value=='active')||(value=='expired')||(value=='pending')">
+ {{ value }}
+ </span>
+ <cds-tag *ngIf="(value==='active')||(value=== 'expired')||(value=== 'pending')"
+ class="{{ value | pipeFunction:useCustomClass:this }}">
+ {{value}}
+ </cds-tag>
+ </span>
</ng-template>
-
-<ng-template #badgeTpl
+<ng-template #tagTpl
let-column="data.column"
let-value="data.value">
<span *ngFor="let item of (value | array); last as last">
- <span class="badge"
- [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
- *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
- {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
- </span>
+ <cds-tag [size]="'md'"
+ class="table-tag"
+ [class]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'tags-primary')"
+ *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
+ {{(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
+ </cds-tag>
<span *ngIf="!last"> </span>
</span>
</ng-template>
let-column="data.column"
let-value="data.value">
<span *ngFor="let item of (value | array);">
- <span
+ <cds-tag
i18n
i18n-ngbTooltip
class="{{(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : ''}}"
ngbTooltip="{{(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.tooltip) ? column.customTemplateConfig.map[item].tooltip : ''}}">
{{value}}
- </span>
+ </cds-tag>
</span>
</ng-template>
.scrollable-expanded-row::-webkit-scrollbar-track {
background: transparent;
}
+
+tr .edit-btn {
+ opacity: 0;
+}
+
+tr:hover .edit-btn {
+ opacity: 1;
+}
+
+.table-tag {
+ white-space: nowrap;
+}
describe('useCustomClass', () => {
beforeEach(() => {
component.customCss = {
- 'badge badge-danger': 'active',
+ 'tag-danger': 'active',
'secret secret-number': 123.456,
btn: (v) => _.isString(v) && v.startsWith('http'),
secure: (v) => _.isString(v) && v.startsWith('https')
});
it('should match a string and return the corresponding class', () => {
- expect(component.useCustomClass('active')).toBe('badge badge-danger');
+ expect(component.useCustomClass('active')).toBe('tag-danger');
});
it('should match a number and return the corresponding class', () => {
executingTpl: TemplateRef<any>;
@ViewChild('classAddingTpl', { static: true })
classAddingTpl: TemplateRef<any>;
- @ViewChild('badgeTpl', { static: true })
-
badgeTpl: TemplateRef<any>;
+ @ViewChild('tagTpl', { static: true })
+
tagTpl: TemplateRef<any>;
@ViewChild('mapTpl', { static: true })
mapTpl: TemplateRef<any>;
@ViewChild('truncateTpl', { static: true })
this.cellTemplates.perSecond = this.perSecondTpl;
this.cellTemplates.executing = this.executingTpl;
this.cellTemplates.classAdding = this.classAddingTpl;
- this.cellTemplates.badge = this.badgeTpl;
+ this.cellTemplates.tag = this.tagTpl;
this.cellTemplates.map = this.mapTpl;
this.cellTemplates.truncate = this.truncateTpl;
this.cellTemplates.timeAgo = this.timeAgoTpl;
// supports an optional custom configuration:
// {
// ...
- // cellTransformation: CellTemplate.badge,
+ // cellTransformation: CellTemplate.tag,
// customTemplateConfig: {
// class?: string; // Additional class name.
// prefix?: any; // Prefix of the value to be displayed.
// }
// }
// }
- badge = 'badge',
+ tag = 'tag',
// Maps the value using the given dictionary.
// {
// ...
if (fileType !== 'directory') {
permissionSummary.push({
content: fileType,
- class: 'badge-primary me-1'
+ class: 'tag-primary me-1'
});
}
if (owner !== '---') {
permissionSummary.push({
content: `owner: ${owner}`,
- class: 'badge-primary me-1'
+ class: 'tag-primary me-1'
});
}
if (group !== '---') {
permissionSummary.push({
content: `group: ${group}`,
- class: 'badge-primary me-1'
+ class: 'tag-primary me-1'
});
}
if (others !== '---') {
permissionSummary.push({
content: `others: ${others}`,
- class: 'badge-primary me-1'
+ class: 'tag-primary me-1'
});
}
return [
{
content: 'no permissions',
- class: 'badge-warning me-1',
+ class: 'tag-warning me-1',
toolTip: `owner: ${owner}, group: ${group}, others: ${others}`
}
];
/* You can add global styles to this file, and also import other style files */
@use './src/styles/defaults' as *;
+@use '@carbon/colors';
@import './src/styles/carbon-defaults.scss';
// Fork-Awesome
}
}
-// Custom badges.
-.badge-background-gray,
-.badge-hdd {
- background-color: $gray-600;
- color: $white;
+// Custom tag.
+
+.tag-background-gray,
+.tag-hdd {
+ background-color: colors.$gray-60;
+ color: colors.$white;
}
-.badge-background-primary,
-.badge-ssd {
+.tag-background-primary,
+.tag-ssd {
background-color: $primary;
- color: $white;
+ color: colors.$white;
}
-.badge-tab {
+.tag-tab {
background-color: $gray-200;
color: $gray-700;
}
-.badge-cd-label-green {
+.tag-cd-label-green {
background-color: $green-300;
color: $white;
}
-.badge-cd-label-cyan {
+.tag-cd-label-cyan {
background-color: $cyan-300;
color: $white;
}
-.badge-cd-label-purple {
+.tag-cd-label-purple {
background-color: $purple-300;
color: $white;
}
-.badge-cd-label-light-blue {
+.tag-cd-label-light-blue {
background-color: $light-blue-300;
color: $white;
}
-.badge-cd-label-gold {
+.tag-cd-label-gold {
background-color: $gold-300;
color: $white;
}
-.badge-cd-label-light-green {
+.tag-cd-label-light-green {
background-color: $light-green-300;
color: $white;
font-weight: bolder;
}
// Other
-tags-input .tags {
+tag-input .tag {
border: 1px solid $gray-400;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba($black, 0.09);
text-decoration: none;
}
-// Overrides the badge to rounded-pill
-.badge {
- @extend .badge, .mb-1;
-}
-
-// Overriding badges to match the class name of badges in Bootstrap v5
-.badge-primary {
- @extend .badge, .bg-primary;
-}
-
-.badge-secondary {
- @extend .badge, .bg-secondary;
-}
-
-.badge-success {
- @extend .badge, .bg-success;
-}
-
-.badge-danger {
- @extend .badge, .bg-danger;
-}
-
-.badge-info {
- @extend .badge, .bg-primary;
-}
-
-.badge-warning {
- @extend .badge, .bg-warning, .text-dark;
-}
-
-.badge-light {
- @extend .badge, .bg-light, .text-dark;
-}
-
-.badge-dark {
- @extend .badge, .bg-dark;
+// Overrides the tags to rounded-pill
+.tag {
+ @extend .tag, .mb-1;
}
formly-form {
******************************************/
@forward './themes/content';
+//Importing carbon tags token
+
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+
/******************************************
Datatable
******************************************/
padding-block: 0 !important;
}
+/******************************************
+ Tags
+******************************************/
+.tag-success {
+ background-color: theme.$support-success;
+ color: colors.$white;
+}
+
+.tag-warning {
+ background: theme.$support-warning;
+ color: colors.$white;
+}
+
+.tag-danger {
+ background: theme.$support-error;
+ color: colors.$white;
+}
+
+.tag-primary {
+ background: vv.$primary;
+ color: colors.$white;
+}
+
+.tag-secondary {
+ background: tag-tokens.$tag-color-warm-gray;
+ color: colors.$white;
+}
+
+.tag-info {
+ background-color: vv.$primary;
+ color: colors.$white;
+}
+
+.tag-light {
+ background: colors.$white;
+ border: tag-tokens.$tag-color-gray;
+}
+
+.tag-dark {
+ background: tag-tokens.$tag-color-cool-gray;
+ color: colors.$white;
+}
+
+.tag-default {
+ background: tag-tokens.$tag-border-gray;
+ color: colors.$white;
+}
+
/******************************************
Side nav
******************************************/
@extend .btn-light;
}
-.btn-primary .badge {
+.btn-primary .tag {
background-color: vv.$gray-200;
color: vv.$primary;
}
projects / ceph.git / commitdiff