Merge pull request #458 from openziti/457-table-resize

Resize data table columns when parent container is resized
openziti · Aug 12, 2024 · 442e4b8 · 442e4b8
2 parents 75f161f + 244df9a
commit 442e4b8
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "io.netfoundry.zac",
-  "version": "3.4.5",
+  "version": "3.4.6",
   "description": "Ziti Administration Console",
   "main": "server.js",
   "type": "module",

diff --git a/projects/ziti-console-lib/package.json b/projects/ziti-console-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openziti/ziti-console-lib",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/openziti/ziti-console"

diff --git a/projects/ziti-console-lib/src/lib/features/config-editor/config-editor.component.ts b/projects/ziti-console-lib/src/lib/features/config-editor/config-editor.component.ts
@@ -236,6 +236,7 @@ export class ConfigEditorComponent implements OnInit {
   jsonDataChanged(event) {
     defer(() => {
       this.configDataChange.emit(this.configData);
+      this.updateFormView(this.items, this.configData);
     });
   }
 }
diff --git a/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.html b/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.html
@@ -1,4 +1,4 @@
-<div class="data-table-container" *ngIf="isLoading || filterApplied || rowData?.length > 0;else nodata">
+<div #tableContainer class="data-table-container" *ngIf="showTable;else nodata">
     <lib-table-filter-bar
             [startCount]="startCount"
             [endCount]="endCount"

diff --git a/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.ts b/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.ts
@@ -14,7 +14,17 @@
     limitations under the License.
 */
 
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 
 // Import the resized event model
 import $ from 'jquery';
@@ -100,6 +110,7 @@ export class DataTableComponent implements OnChanges, OnInit {
   menuLeft;
   menuTop;
   gridRendered;
+  resizeHandlerInit = false;
   resizeGridColumnsDebounced;
   selectedItem: any = {
     actionList: [],
@@ -193,6 +204,7 @@ export class DataTableComponent implements OnChanges, OnInit {
 
   @ViewChild('calendar', { static: false }) calendar: any;
   @ViewChild('contextMenu') contextMenu;
+  @ViewChild('tableContainer') tableContainer: ElementRef;
 
   constructor(public svc: DataTableService, private tableFilterService: DataTableFilterService) {
     this.resizeGridColumnsDebounced = _.debounce(this.svc.resizeGridColumns.bind(this.svc), 20, {leading: true});
@@ -222,6 +234,14 @@ export class DataTableComponent implements OnChanges, OnInit {
     });
   }
 
+  get showTable() {
+    const _showTable = this.isLoading || this.filterApplied || this.rowData?.length > 0;
+    if (_showTable && !this.resizeHandlerInit) {
+      this._initGridResizeHandler();
+    }
+    return _showTable;
+  }
+
   ngOnInit() {
     this.frameworkComponents = {
       cellSelectComponent: TableCellSelectComponent,
@@ -471,6 +491,17 @@ export class DataTableComponent implements OnChanges, OnInit {
     return this.allowDownload && this._view !== 'process';
   }
 
+  _initGridResizeHandler() {
+    if (!this.tableContainer) {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      this.resizeGridColumnsDebounced();
+    });
+    observer.observe(this.tableContainer.nativeElement);
+    this.resizeHandlerInit = true;
+  }
+
   _initGridOptions() {
     this.gridOptions = {
       pagination: false,

diff --git a/projects/ziti-console-lib/src/lib/features/data-table/data-table.service.ts b/projects/ziti-console-lib/src/lib/features/data-table/data-table.service.ts
@@ -38,28 +38,28 @@ export class DataTableService {
     localStorage.setItem(`ziti_${this.tableId}_table_state`, tableStateCookie);
   }
 
-  onColumnsResized(tableId, gridObj, column) {
-    this.saveColumnWidths(tableId, gridObj, column);
+  onColumnsResized(column) {
+    this.saveColumnWidths(column);
   }
-  private saveColumnWidths(tableId, gridObj, column) {
+  private saveColumnWidths(column) {
     if (!column) {
       return;
     }
     const columnId = column.colId;
     const columnWidth = column.actualWidth;
-    let colWidthsCookie = localStorage.getItem(`ziti_${tableId}_column_widths`);
+    let colWidthsCookie = localStorage.getItem(`ziti_${this.tableId}_column_widths`);
     let colWidths: any = {};
     if (!_.isEmpty(colWidthsCookie)) {
       colWidths = JSON.parse(colWidthsCookie);
     }
     colWidths[columnId] = columnWidth;
     colWidthsCookie = JSON.stringify(colWidths);
-    localStorage.setItem(`ziti_${tableId}_column_widths`, colWidthsCookie);
+    localStorage.setItem(`ziti_${this.tableId}_column_widths`, colWidthsCookie);
 
-    let tableStateCookie = localStorage.getItem(`ziti_${tableId}_table_state`);
+    let tableStateCookie = localStorage.getItem(`ziti_${this.tableId}_table_state`);
     let tableState;
     if (_.isEmpty(tableStateCookie)) {
-      tableState = gridObj.columnApi.getColumnState();
+      tableState = this.gridObj.columnApi.getColumnState();
     } else {
       tableState = JSON.parse(tableStateCookie);
     }
@@ -70,8 +70,8 @@ export class DataTableService {
       }
     });
     tableStateCookie = JSON.stringify(tableState);
-    localStorage.setItem(`ziti_${tableId}_table_state`, tableStateCookie);
-    _.forEach(gridObj.columnApi.columnModel.columnDefs, (colDef) => {
+    localStorage.setItem(`ziti_${this.tableId}_table_state`, tableStateCookie);
+    _.forEach(this.gridObj.columnApi.columnModel.columnDefs, (colDef) => {
       if (colDef.colId === columnId) {
         colDef.suppressSizeToFit = true;
       }

diff --git a/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.ts b/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.ts
@@ -55,6 +55,8 @@ export class JsonViewComponent implements AfterViewInit, OnChanges {
   private schemaDefinitions: any;
   oldData: any;
   currentData: any;
+  editorInit = false;
+
   constructor(private growlerService: GrowlerService) {
     this.onChangeDebounced = _.debounce(this.onChange.bind(this), 400);
   }
@@ -74,10 +76,13 @@ export class JsonViewComponent implements AfterViewInit, OnChanges {
   }
 
   initEditor() {
+    if (!this.editorDiv || !this.data || this.editorInit) {
+      return;
+    }
     this.currentData = this.data;
     this.content = {
       text: undefined,
-      json: this.data
+      json: this.data || {}
     };
     this.editor = new JSONEditor({
       target: this.editorDiv.nativeElement,
@@ -109,6 +114,7 @@ export class JsonViewComponent implements AfterViewInit, OnChanges {
         }
       }
     });
+    this.editorInit = true;
   }
 
   updateEditor() {
@@ -117,7 +123,7 @@ export class JsonViewComponent implements AfterViewInit, OnChanges {
     }
     this.oldData = _.cloneDeep(this.data);
     this.content = {
-      json: this.oldData
+      json: this.oldData || {}
     };
     this.editor.update(this.content);
   }
@@ -181,6 +187,10 @@ export class JsonViewComponent implements AfterViewInit, OnChanges {
           });
         }
       }
+    } else if (changes['data']) {
+      if (!this.editorInit) {
+        this.initEditor();
+      }
     }
   }
 

diff --git a/...sole-lib/src/lib/features/projectable-forms/configuration/configuration-form.component.ts b/...sole-lib/src/lib/features/projectable-forms/configuration/configuration-form.component.ts
@@ -180,7 +180,11 @@ export class ConfigurationFormComponent extends ProjectableForm implements OnIni
             this.isLoading = false;
         });
         if (configId) {
-            this.closeModal(true, true);
+            if (this.isModal) {
+                this.closeModal(true, true);
+            } else {
+                this.returnToListPage();
+            }
         };
     }
 

diff --git a/...onsole-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.html b/...onsole-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.html
@@ -85,7 +85,7 @@
                             [label]="'OPTIONAL'"
                             class="form-field-advanced"
                     >
-                        <lib-json-view></lib-json-view>
+                        <lib-json-view [(data)]="formData.appData"></lib-json-view>
                     </lib-form-field-container>
                 </div>
             </div>

diff --git a/...s/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.html b/...s/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.html
@@ -184,13 +184,6 @@
                     >
                         <lib-custom-tags [(tags)]="formData.tags"></lib-custom-tags>
                     </lib-form-field-container>
-                    <lib-form-field-container
-                            [title]="'App Data'"
-                            [label]="'OPTIONAL'"
-                            class="form-field-advanced"
-                    >
-                        <lib-json-view></lib-json-view>
-                    </lib-form-field-container>
                 </div>
             </div>
             <div class="form-group-column two-fifths">

diff --git a/release-notes.md b/release-notes.md
@@ -1,4 +1,15 @@
+# app-ziti-console-v3.4.6
+# ziti-console-lib-v0.4.6
+
+## Bug Fixes
+* [Issue #450](https://github.com/openziti/ziti-console/issues/450) - Hide the navigation bar when session expires and routing to login page
+* [Issue #452](https://github.com/openziti/ziti-console/issues/452) - Correctly show associated entities when using the #all attribute
+* [Issue #453](https://github.com/openziti/ziti-console/issues/453) - AppData is not persisting when adding via the JSON editor on edit forms
+* [Issue #455](https://github.com/openziti/ziti-console/issues/455) - Prevent overflow of attribute items with long names in tag selector component
+* [Issue #457](https://github.com/openziti/ziti-console/issues/457) - Table is not resized when browzer size changes
+
 # app-ziti-console-v3.4.5
+## Bug Fixes
 * [Issue #444](https://github.com/openziti/ziti-console/issues/444) - BASE_HREF is wrongly quoted