From 94df762b20adce1c502d81b2aa114696ae539269 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Mon, 5 Mar 2018 16:04:04 +0100 Subject: [PATCH] mgr/dashboard_v2: Add toggle able columns MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit It's now possible to toggle columns on and off in the data table. Signed-off-by: Stephan Müller --- .../frontend/src/app/app.module.ts | 3 +- .../mirroring/mirroring.component.spec.ts | 4 +- .../pool-detail/pool-detail.component.spec.ts | 3 +- .../cephfs/cephfs/cephfs.component.spec.ts | 10 ++- .../cephfs/clients/clients.component.spec.ts | 7 +- .../cluster/hosts/hosts.component.spec.ts | 3 + .../performance-counter.component.spec.ts | 8 ++- .../table-performance-counter.service.spec.ts | 8 ++- ...able-performance-counter.component.spec.ts | 3 + .../rgw-daemon-details.component.spec.ts | 3 +- .../rgw-daemon-list.component.spec.ts | 3 + .../app/core/navigation/navigation.module.ts | 2 +- .../app/shared/datatable/datatable.module.ts | 2 + .../datatable/table/table.component.html | 27 ++++++- .../datatable/table/table.component.spec.ts | 55 ++++++++++++++ .../shared/datatable/table/table.component.ts | 72 ++++++++++++++----- .../src/app/shared/models/cd-table-column.ts | 1 + 17 files changed, 184 insertions(+), 30 deletions(-) diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.module.ts index e1ac1f7198f..525e94729fa 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.module.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.module.ts @@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ToastModule, ToastOptions } from 'ng2-toastr/ng2-toastr'; -import { AccordionModule, TabsModule } from 'ngx-bootstrap'; +import { AccordionModule, BsDropdownModule, TabsModule } from 'ngx-bootstrap'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CephModule } from './ceph/ceph.module'; @@ -35,6 +35,7 @@ export class CustomOption extends ToastOptions { SharedModule, CephModule, AccordionModule.forRoot(), + BsDropdownModule.forRoot(), TabsModule.forRoot(), HttpClientModule, BrowserAnimationsModule diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/mirroring/mirroring.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/mirroring/mirroring.component.spec.ts index accc5641819..f20d0484c01 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/mirroring/mirroring.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/mirroring/mirroring.component.spec.ts @@ -1,13 +1,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BsDropdownModule, TabsModule } from 'ngx-bootstrap'; import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; -import { TabsModule } from 'ngx-bootstrap/tabs'; import { Observable } from 'rxjs/Observable'; import { RbdMirroringService } from '../../../shared/services/rbd-mirroring.service'; import { SharedModule } from '../../../shared/shared.module'; -import { BlockModule } from '../block.module'; import { MirrorHealthColorPipe } from '../mirror-health-color.pipe'; import { MirroringComponent } from './mirroring.component'; @@ -29,6 +28,7 @@ describe('MirroringComponent', () => { declarations: [MirroringComponent, MirrorHealthColorPipe], imports: [ SharedModule, + BsDropdownModule.forRoot(), TabsModule.forRoot(), ProgressbarModule.forRoot(), HttpClientTestingModule diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.spec.ts index 6a208af5326..aea790cf1da 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/block/pool-detail/pool-detail.component.spec.ts @@ -2,7 +2,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { AlertModule, TabsModule } from 'ngx-bootstrap'; +import { AlertModule, BsDropdownModule, TabsModule } from 'ngx-bootstrap'; import { ComponentsModule } from '../../../shared/components/components.module'; import { SharedModule } from '../../../shared/shared.module'; @@ -16,6 +16,7 @@ describe('PoolDetailComponent', () => { TestBed.configureTestingModule({ imports: [ SharedModule, + BsDropdownModule.forRoot(), TabsModule.forRoot(), AlertModule.forRoot(), ComponentsModule, diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.spec.ts index 2a92a5dcf20..03e5b1ba3bc 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.spec.ts @@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { ChartsModule } from 'ng2-charts/ng2-charts'; -import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; +import { BsDropdownModule, ProgressbarModule } from 'ngx-bootstrap'; import { Observable } from 'rxjs/Observable'; import { SharedModule } from '../../../shared/shared.module'; @@ -29,7 +29,13 @@ describe('CephfsComponent', () => { beforeEach( async(() => { TestBed.configureTestingModule({ - imports: [SharedModule, ChartsModule, RouterTestingModule, ProgressbarModule.forRoot()], + imports: [ + SharedModule, + ChartsModule, + RouterTestingModule, + BsDropdownModule.forRoot(), + ProgressbarModule.forRoot() + ], declarations: [CephfsComponent], providers: [ { provide: CephfsService, useValue: fakeFilesystemService } diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/clients/clients.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/clients/clients.component.spec.ts index e07914b9f81..d3506a90686 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/clients/clients.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/clients/clients.component.spec.ts @@ -1,6 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; import { Observable } from 'rxjs/Observable'; import { SharedModule } from '../../../shared/shared.module'; @@ -27,7 +28,11 @@ describe('ClientsComponent', () => { beforeEach( async(() => { TestBed.configureTestingModule({ - imports: [RouterTestingModule, SharedModule], + imports: [ + RouterTestingModule, + BsDropdownModule.forRoot(), + SharedModule + ], declarations: [ClientsComponent], providers: [{ provide: CephfsService, useValue: fakeFilesystemService }] }).compileComponents(); diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts index 6bf9a2d763b..90eb5e6498b 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts @@ -2,6 +2,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; + import { ComponentsModule } from '../../../shared/components/components.module'; import { SharedModule } from '../../../shared/shared.module'; import { HostsComponent } from './hosts.component'; @@ -16,6 +18,7 @@ describe('HostsComponent', () => { SharedModule, HttpClientTestingModule, ComponentsModule, + BsDropdownModule.forRoot(), RouterTestingModule ], declarations: [ diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts index f2e2daeeef0..a4cc7170231 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts @@ -1,6 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; + import { PerformanceCounterModule } from '../performance-counter.module'; import { TablePerformanceCounterService } from '../services/table-performance-counter.service'; import { PerformanceCounterComponent } from './performance-counter.component'; @@ -25,7 +27,11 @@ describe('PerformanceCounterComponent', () => { beforeEach( async(() => { TestBed.configureTestingModule({ - imports: [PerformanceCounterModule, RouterTestingModule], + imports: [ + PerformanceCounterModule, + BsDropdownModule.forRoot(), + RouterTestingModule + ], providers: [{ provide: TablePerformanceCounterService, useValue: fakeService }] }).compileComponents(); }) diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/services/table-performance-counter.service.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/services/table-performance-counter.service.spec.ts index 37350f76b24..6f0af94e4b6 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/services/table-performance-counter.service.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/services/table-performance-counter.service.spec.ts @@ -2,13 +2,19 @@ import { HttpClientModule } from '@angular/common/http'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { inject, TestBed } from '@angular/core/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; + import { TablePerformanceCounterService } from './table-performance-counter.service'; describe('TablePerformanceCounterService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [TablePerformanceCounterService], - imports: [HttpClientTestingModule, HttpClientModule] + imports: [ + HttpClientTestingModule, + BsDropdownModule.forRoot(), + HttpClientModule + ] }); }); diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.spec.ts index dae55c6880e..4baefe8911d 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.spec.ts @@ -2,6 +2,8 @@ import { HttpClientModule } from '@angular/common/http'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; + import { SharedModule } from '../../../shared/shared.module'; import { TablePerformanceCounterService } from '../services/table-performance-counter.service'; import { TablePerformanceCounterComponent } from './table-performance-counter.component'; @@ -16,6 +18,7 @@ describe('TablePerformanceCounterComponent', () => { imports: [ HttpClientTestingModule, HttpClientModule, + BsDropdownModule.forRoot(), SharedModule ], providers: [ TablePerformanceCounterService ] diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.spec.ts index d48f1cce51f..ca2d7e6089f 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.spec.ts @@ -2,7 +2,7 @@ import { HttpClientModule } from '@angular/common/http'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { TabsModule } from 'ngx-bootstrap/tabs'; +import { BsDropdownModule, TabsModule } from 'ngx-bootstrap'; import { SharedModule } from '../../../shared/shared.module'; import { PerformanceCounterModule } from '../../performance-counter/performance-counter.module'; @@ -21,6 +21,7 @@ describe('RgwDaemonDetailsComponent', () => { PerformanceCounterModule, HttpClientTestingModule, HttpClientModule, + BsDropdownModule.forRoot(), TabsModule.forRoot() ], providers: [ RgwDaemonService ] diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.spec.ts index 5deca8c72e2..d3c5a11a684 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.spec.ts @@ -2,6 +2,8 @@ import { HttpClientModule } from '@angular/common/http'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BsDropdownModule } from 'ngx-bootstrap'; + import { DataTableModule } from '../../../shared/datatable/datatable.module'; import { RgwDaemonService } from '../services/rgw-daemon.service'; import { RgwDaemonListComponent } from './rgw-daemon-list.component'; @@ -16,6 +18,7 @@ describe('RgwDaemonListComponent', () => { imports: [ DataTableModule, HttpClientTestingModule, + BsDropdownModule.forRoot(), HttpClientModule ], providers: [ RgwDaemonService ] diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts index 823d4feea18..6ec240de965 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts @@ -13,7 +13,7 @@ import { NavigationComponent } from './navigation/navigation.component'; imports: [ CommonModule, AuthModule, - BsDropdownModule.forRoot(), + BsDropdownModule, AppRoutingModule, SharedModule, RouterModule diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/datatable.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/datatable.module.ts index df7ca994dad..19d1a45605a 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/datatable.module.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/datatable.module.ts @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +import { BsDropdownModule } from 'ngx-bootstrap'; import { ComponentsModule } from '../components/components.module'; import { PipesModule } from '../pipes/pipes.module'; import { TableDetailsDirective } from './table-details.directive'; @@ -16,6 +17,7 @@ import { TableComponent } from './table/table.component'; CommonModule, NgxDatatableModule, FormsModule, + BsDropdownModule, PipesModule, ComponentsModule, RouterModule diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html index 7ae84f98ca8..d04378a031f 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html @@ -39,6 +39,31 @@ + +
+
+ + + +
    +
  • + +
    • +
+
+
+ +
@@ -54,7 +79,7 @@ [selected]="selection.selected" (select)="onSelect()" [sorts]="sorts" - [columns]="columns" + [columns]="tableColumns" [columnMode]="columnMode" [rows]="rows" [rowClass]="getRowClass()" diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts index 43c9ce1a7aa..60ec7d01327 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts @@ -87,4 +87,59 @@ describe('TableComponent', () => { component.updateFilter(); expect(component.rows.length).toBe(100); }); + + describe('after ngInit', () => { + const toggleColumn = (prop, checked) => { + component.toggleColumn({ + target: { + name: prop, + checked: checked + } + }); + }; + + beforeEach(() => { + component.ngOnInit(); + component.table.sorts = component.sorts; + }); + + it('should have updated the column definitions', () => { + expect(component.columns[0].flexGrow).toBe(1); + expect(component.columns[1].flexGrow).toBe(2); + expect(component.columns[2].flexGrow).toBe(2); + expect(component.columns[2].resizeable).toBe(false); + }); + + it('should have table columns', () => { + expect(component.tableColumns.length).toBe(3); + expect(component.tableColumns).toEqual(component.columns); + }); + + it('should have a unique identifier which is search for', () => { + expect(component.identifier).toBe('a'); + expect(component.sorts[0].prop).toBe('a'); + expect(component.sorts).toEqual(component.createSortingDefinition('a')); + }); + + it('should remove column "a"', () => { + toggleColumn('a', false); + expect(component.table.sorts[0].prop).toBe('b'); + expect(component.tableColumns.length).toBe(2); + }); + + it('should not be able to remove all columns', () => { + toggleColumn('a', false); + toggleColumn('b', false); + toggleColumn('c', false); + expect(component.table.sorts[0].prop).toBe('c'); + expect(component.tableColumns.length).toBe(1); + }); + + it('should enable column "a" again', () => { + toggleColumn('a', false); + toggleColumn('a', true); + expect(component.table.sorts[0].prop).toBe('b'); + expect(component.tableColumns.length).toBe(3); + }); + }); }); diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts index 870ed29633d..7ba073aea31 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts @@ -12,8 +12,12 @@ import { Type, ViewChild } from '@angular/core'; - -import { DatatableComponent, SortDirection, SortPropDir } from '@swimlane/ngx-datatable'; +import { + DatatableComponent, + SortDirection, + SortPropDir, + TableColumnProp +} from '@swimlane/ngx-datatable'; import * as _ from 'lodash'; import 'rxjs/add/observable/timer'; @@ -43,7 +47,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O // Each item -> { prop: 'attribute name', dir: 'asc'||'desc'} @Input() sorts?: SortPropDir[]; // Method used for setting column widths. - @Input() columnMode ?= 'force'; + @Input() columnMode ?= 'flex'; // Name of the component e.g. 'TableDetailsComponent' @Input() detailsComponent?: string; // Display the tool header, including reload button, pagination and search fields? @@ -85,6 +89,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O */ selection = new CdTableSelection(); + tableColumns: CdTableColumn[]; cellTemplates: { [key: string]: TemplateRef } = {}; @@ -109,26 +114,28 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O ngOnInit() { this._addTemplates(); - this.columns.map((column) => { - if (column.cellTransformation) { - column.cellTemplate = this.cellTemplates[column.cellTransformation]; + if (!this.sorts) { + this.identifier = this.columns.some(c => c.prop === this.identifier) ? + this.identifier : + this.columns[0].prop + ''; + this.sorts = this.createSortingDefinition(this.identifier); + } + this.columns.map(c => { + if (c.cellTransformation) { + c.cellTemplate = this.cellTemplates[c.cellTransformation]; } - return column; + if (!c.flexGrow) { + c.flexGrow = c.prop + '' === this.identifier ? 1 : 2; + } + if (!c.resizeable) { + c.resizeable = false; + } + return c; }); if (this.detailsComponent) { this.selectionType = 'multi'; } - if (!this.sorts) { - const sortProp = this.columns.some((c) => c.prop === this.identifier) ? - this.identifier : - this.columns[0].prop; - this.sorts = [ - { - prop: sortProp, - dir: SortDirection.asc - } - ]; - } + this.tableColumns = this.columns.filter(c => !c.isHidden); if (this.autoReload) { // Also if nothing is bound to fetchData nothing will be triggered // Force showing the loading indicator because it has been set to False in // useData() when this method was triggered by ngOnChanges(). @@ -222,6 +229,35 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O } } + toggleColumn($event: any) { + const prop: TableColumnProp = $event.target.name; + const hide = !$event.target.checked; + if (hide && this.tableColumns.length === 1) { + $event.target.checked = true; + return; + } + _.find(this.columns, (c: CdTableColumn) => c.prop === prop).isHidden = hide; + this.updateColumns(); + } + + updateColumns () { + this.tableColumns = this.columns.filter(c => !c.isHidden); + const sortProp = this.table.sorts[0].prop; + if (!_.find(this.tableColumns, (c: CdTableColumn) => c.prop === sortProp)) { + this.table.onColumnSort({sorts: this.createSortingDefinition(this.tableColumns[0].prop)}); + } + this.table.recalculate(); + } + + createSortingDefinition (prop: TableColumnProp): SortPropDir[] { + return [ + { + prop: prop, + dir: SortDirection.asc + } + ]; + } + updateDetailView() { if (!this.detailsComponent) { return; diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts index 9f29edd1b0f..bf45c481874 100644 --- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts +++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts @@ -3,4 +3,5 @@ import { CellTemplate } from '../enum/cell-template.enum'; export interface CdTableColumn extends TableColumn { cellTransformation?: CellTemplate; + isHidden?: boolean; } -- 2.39.5