From: Volker Theile Date: Tue, 31 Mar 2020 09:13:21 +0000 (+0200) Subject: mgr/dashboard: shorten `Container ID` and `Container image ID` in Services page X-Git-Tag: v17.0.0~2766^2 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=ed51f8039abad07fe8c44c233c8e30dc4810fe8b;p=ceph.git mgr/dashboard: shorten `Container ID` and `Container image ID` in Services page Fixes: https://tracker.ceph.com/issues/44539 Signed-off-by: Volker Theile --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts index 82632e0607e7e..6683d276c6a46 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts @@ -18,6 +18,7 @@ import { CephServiceService } from '../../../../shared/api/ceph-service.service' import { HostService } from '../../../../shared/api/host.service'; import { OrchestratorService } from '../../../../shared/api/orchestrator.service'; import { TableComponent } from '../../../../shared/datatable/table/table.component'; +import { CellTemplate } from '../../../../shared/enum/cell-template.enum'; import { CdTableColumn } from '../../../../shared/models/cd-table-column'; import { CdTableFetchDataContext } from '../../../../shared/models/cd-table-fetch-data-context'; import { Daemon } from '../../../../shared/models/daemon.interface'; @@ -76,7 +77,11 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI name: this.i18n('Container ID'), prop: 'container_id', flexGrow: 3, - filterable: true + filterable: true, + cellTransformation: CellTemplate.truncate, + customTemplateConfig: { + length: 12 + } }, { name: this.i18n('Container Image name'), @@ -88,7 +93,11 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI name: this.i18n('Container Image ID'), prop: 'container_image_id', flexGrow: 3, - filterable: true + filterable: true, + cellTransformation: CellTemplate.truncate, + customTemplateConfig: { + length: 12 + } }, { name: this.i18n('Version'), diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts index 74f059f5e6005..a691ff5c61ebd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts @@ -4,6 +4,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'; import { CephServiceService } from '../../../shared/api/ceph-service.service'; import { OrchestratorService } from '../../../shared/api/orchestrator.service'; import { TableComponent } from '../../../shared/datatable/table/table.component'; +import { CellTemplate } from '../../../shared/enum/cell-template.enum'; import { CdTableColumn } from '../../../shared/models/cd-table-column'; import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context'; import { CdTableSelection } from '../../../shared/models/cd-table-selection'; @@ -60,7 +61,11 @@ export class ServicesComponent implements OnChanges, OnInit { { name: this.i18n('Container image ID'), prop: 'status.container_image_id', - flexGrow: 3 + flexGrow: 3, + cellTransformation: CellTemplate.truncate, + customTemplateConfig: { + length: 12 + } }, { name: this.i18n('Running'), diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html index ceef88337ab8f..82eeef2f4df65 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html @@ -290,3 +290,10 @@ let-value="value"> {{ value | map:column?.customTemplateConfig }} + + + {{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }} + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts index 4433326cebbe2..1eb859e18f161 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts @@ -61,6 +61,8 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O badgeTpl: TemplateRef; @ViewChild('mapTpl', { static: true }) mapTpl: TemplateRef; + @ViewChild('truncateTpl', { static: true }) + truncateTpl: TemplateRef; // This is the array with the items to be shown. @Input() @@ -513,6 +515,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O this.cellTemplates.classAdding = this.classAddingTpl; this.cellTemplates.badge = this.badgeTpl; this.cellTemplates.map = this.mapTpl; + this.cellTemplates.truncate = this.truncateTpl; } useCustomClass(value: any): string { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts index 47f180bc5a901..586f4376f04bd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts @@ -29,5 +29,16 @@ export enum CellTemplate { // [key: any]: any // } // } - map = 'map' + map = 'map', + // Truncates string if it's longer than the given maximum + // string length. + // { + // ... + // cellTransformation: CellTemplate.truncate, + // customTemplateConfig: { + // length?: number; // Defaults to 30. + // omission?: string; // Defaults to empty string. + // } + // } + truncate = 'truncate' } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts index 5a70d512ff6f8..3deb535929d3c 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts @@ -26,6 +26,7 @@ import { OrdinalPipe } from './ordinal.pipe'; import { RbdConfigurationSourcePipe } from './rbd-configuration-source.pipe'; import { RelativeDatePipe } from './relative-date.pipe'; import { RoundPipe } from './round.pipe'; +import { TruncatePipe } from './truncate.pipe'; import { UpperFirstPipe } from './upper-first.pipe'; @NgModule({ @@ -56,7 +57,8 @@ import { UpperFirstPipe } from './upper-first.pipe'; UpperFirstPipe, RbdConfigurationSourcePipe, DurationPipe, - MapPipe + MapPipe, + TruncatePipe ], exports: [ ArrayPipe, @@ -84,7 +86,8 @@ import { UpperFirstPipe } from './upper-first.pipe'; UpperFirstPipe, RbdConfigurationSourcePipe, DurationPipe, - MapPipe + MapPipe, + TruncatePipe ], providers: [ ArrayPipe, @@ -108,7 +111,8 @@ import { UpperFirstPipe } from './upper-first.pipe'; MillisecondsPipe, NotAvailablePipe, UpperFirstPipe, - MapPipe + MapPipe, + TruncatePipe ] }) export class PipesModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.spec.ts new file mode 100644 index 0000000000000..cc0b2fc70f224 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.spec.ts @@ -0,0 +1,21 @@ +import { TruncatePipe } from './truncate.pipe'; + +describe('TruncatePipe', () => { + const pipe = new TruncatePipe(); + + it('create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + it('should truncate string (1)', () => { + expect(pipe.transform('fsdfdsfs asdasd', 5, '')).toEqual('fsdfd'); + }); + + it('should truncate string (2)', () => { + expect(pipe.transform('fsdfdsfs asdasd', 10, '...')).toEqual('fsdfdsf...'); + }); + + it('should not truncate number', () => { + expect(pipe.transform(2, 6, '...')).toBe(2); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.ts new file mode 100644 index 0000000000000..d825832f5e633 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/truncate.pipe.ts @@ -0,0 +1,16 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +import * as _ from 'lodash'; + +@Pipe({ + name: 'truncate' +}) +export class TruncatePipe implements PipeTransform { + transform(value: any, length: number, omission?: string): any { + if (!_.isString(value)) { + return value; + } + omission = _.defaultTo(omission, ''); + return _.truncate(value, { length, omission }); + } +}