diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
index 65d647993f..d1142d08ed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
@@ -17,8 +17,16 @@
-->
-
- {{ column.title }}
+
+ {{'entity.show-all-columns' | translate}}
+
+ @for (column of columns; track column.def) {
+
+ {{ column.title }}
+
+ }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
index 8c5f13de69..4ef00bd575 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
@@ -15,6 +15,8 @@
///
import { Component, Inject, InjectionToken } from '@angular/core';
+import { isDefinedAndNotNull } from '@core/utils';
+import { SelectableColumnsPipe } from '@shared/public-api';
import { DisplayColumn } from '@home/components/widget/lib/table-widget.models';
export const DISPLAY_COLUMNS_PANEL_DATA = new InjectionToken('DisplayColumnsPanelData');
@@ -33,8 +35,28 @@ export class DisplayColumnsPanelComponent {
columns: DisplayColumn[];
- constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) {
- this.columns = this.data.columns;
+ constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData,
+ private selectableColumnsPipe: SelectableColumnsPipe ) {
+ this.columns = this.selectableColumnsPipe.transform(this.data.columns);
+ }
+
+ get allColumnsVisible(): boolean {
+ return isDefinedAndNotNull(this.columns) && this.columns.every(column => column.display);
+ }
+
+ get someColumnsVisible(): boolean {
+ const filtredColumns = this.columns.filter(item => item.display);
+ return filtredColumns.length !== 0 && this.columns.length !== filtredColumns.length;
+ }
+
+ public toggleAllColumns(event: any): void {
+ const isChecked = event.checked;
+
+ this.columns.forEach(column => {
+ column.display = isChecked;
+ });
+
+ this.update();
}
public update() {
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 3e414577ec..b94e72d76f 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -237,6 +237,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
@NgModule({
providers: [
DatePipe,
+ SelectableColumnsPipe,
MillisecondsToTimeStringPipe,
EnumToArrayPipe,
HighlightPipe,
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index c32bf6801f..c28a326f5b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2770,6 +2770,7 @@
"details": "Entity details",
"no-entities-prompt": "No entities found",
"no-data": "No data to display",
+ "show-all-columns":"Show All",
"columns-to-display": "Columns to Display",
"type-api-usage-state": "API Usage State",
"type-edge": "Edge",