RepoMirrors/ceph
1
0
Fork 0
mirror of https://github.com/ceph/ceph synced 2025-02-21 09:57:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #59220 from ivoalmeida/carbon-datatable-cleanups

Browse Source 
mgr/dashboard: carbon datatables impr and cleanups

Reviewed-by: Nizamudeen A <nia@redhat.com>
This commit is contained in:
Ivo Almeida 2024-08-15 18:07:47 +01:00 committed by GitHub
commit dbcd88835c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
View File

@ -114,7 +114,7 @@
*ngIf="metadata">
<legend>{{ metadataTitle }}</legend>
<div>
<cd-table-key-value cdTableDetail
<cd-table-key-value *cdTableDetail
[data]="metadata">
</cd-table-key-value>
</div>

6
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html
View File

@ -29,9 +29,9 @@
[tableActions]="meta.actions">
</cd-table-actions>
</div>
<ng-container [ngIf]="expandedRow && meta.detail_columns.length > 0"
*cdTableDetail>
<table class="table table-striped table-bordered">
<ng-container *ngIf="expandedRow && meta.detail_columns.length > 0">
<table *cdTableDetail
class="table table-striped table-bordered">
<tbody>
<tr *ngFor="let column of meta.detail_columns">
<td i18n

47
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
View File

@ -363,6 +363,29 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
}
];
}
const tableHeadersSubscription = this._tableHeaders
.pipe(
map((values: CdTableColumn[]) =>
values.map(
(col: CdTableColumn) =>
new TableHeaderItem({
data: col?.headerTemplate ? { ...col } : col.name,
title: col.name,
template: col?.headerTemplate,
// if cellClass is a function it cannot be called here as it requires table data to execute
// instead if cellClass is a function it will be called and applied while parsing the data
className: _.isString(col?.cellClass) ? col?.cellClass : col?.className,
visible: !col.isHidden,
sortable: _.isNil(col.sortable) ? true : col.sortable
})
)
)
)
.subscribe({
next: (values: TableHeaderItem[]) => (this.model.header = values)
});
const datasetSubscription = this._dataset
.pipe(
filter((values: any[]) => {
@ -419,28 +442,6 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
}
});
const tableHeadersSubscription = this._tableHeaders
.pipe(
map((values: CdTableColumn[]) =>
values.map(
(col: CdTableColumn) =>
new TableHeaderItem({
data: col?.headerTemplate ? { ...col } : col.name,
title: col.name,
template: col?.headerTemplate,
// if cellClass is a function it cannot be called here as it requires table data to execute
// instead if cellClass is a function it will be called and applied while parsing the data
className: _.isString(col?.cellClass) ? col?.cellClass : col?.className,
visible: !col.isHidden,
sortable: _.isNil(col.sortable) ? true : col.sortable
})
)
)
)
.subscribe({
next: (values: TableHeaderItem[]) => (this.model.header = values)
});
const rowsExpandedSubscription = this.model.rowsExpandedChange.subscribe({
next: (index: number) => {
if (this.model.rowsExpanded.every((x) => !x)) {
@ -454,9 +455,9 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
}
});
this._subscriptions.add(tableHeadersSubscription);
this._subscriptions.add(datasetSubscription);
this._subscriptions.add(rowsExpandedSubscription);
this._subscriptions.add(tableHeadersSubscription);
}
ngOnInit() {

6
src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss
View File

@ -28,10 +28,10 @@ $content-theme: map-merge(
focus-inverse: lighten(vv.$primary, 25%),
text-inverse: vv.$dark,
support-info: vv.$info,
layer-01: vv.$secondary,
layer-hover-01: vv.$gray-600,
layer-01: vv.$light,
layer-hover-01: colors.$gray-20,
text-primary: vv.$dark,
text-secondary: vv.$body-bg-alt,
text-secondary: vv.$dark,
text-disabled: vv.$gray-500,
icon-secondary: vv.$body-bg-alt
)