[NIFI-13683] - Refactor Status History dialog to not support manual resizing via a dialog drag handle, but favor a maximize/minimize button approach familiar to other windowed applications. When maximized, the dialog will resize as the browser window resizes. This solution eliminates the need for the unsupported (in Firefox) computedStyleMap that was causing issues. (#9218)

nifi-frontend/src/main/frontend/apps/nifi/src/app/state/status-history/status-history.effects.ts

@@ -164,7 +164,8 @@ export class StatusHistoryEffects {
                     const dialogReference = this.dialog.open(StatusHistory, {
                         maxHeight: 'unset',
                         maxWidth: 'unset',
-                        data: request
+                        data: request,
+                        autoFocus: 'dialog'
                     });
 
                     dialogReference.afterClosed().subscribe((response) => {

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history.component.html

@@ -14,15 +14,36 @@
 ~  See the License for the specific language governing permissions and
 ~  limitations under the License.
 -->
+
 <div
-    resizable
-    [resizeDisabled]="instances.length === 0 || fieldDescriptors.length === 0"
-    (resized)="resized()"
-    [minHeight]="720"
-    [minWidth]="887"
+    [class.maximized]="dialogMaximized && instances.length > 0 && fieldDescriptors.length > 0"
+    [class.insufficient-history]="!instances.length || !fieldDescriptors.length"
     class="flex flex-col status-history-container">
     @if (statusHistoryState$ | async; as statusHistoryState) {
-        <h2 mat-dialog-title>Status History</h2>
+        <div class="flex justify-between">
+            <h2 mat-dialog-title>Status History</h2>
+            @if (instances.length > 0 && fieldDescriptors.length > 0) {
+                @if (!dialogMaximized) {
+                    <button
+                        class="mt-2 mr-2"
+                        mat-icon-button
+                        color="primary"
+                        (click)="maximize()"
+                        title="Maximize dialog size">
+                        <i class="fa fa-window-maximize"></i>
+                    </button>
+                } @else {
+                    <button
+                        class="mt-2 mr-2"
+                        mat-icon-button
+                        color="primary"
+                        (click)="minimize()"
+                        title="Restore default dialog size">
+                        <i class="fa fa-window-minimize"></i>
+                    </button>
+                }
+            }
+        </div>
         <error-banner></error-banner>
         <div class="status-history flex flex-col grow">
             <mat-dialog-content class="grow flex flex-1">

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history.component.scss

@@ -20,8 +20,21 @@
 .status-history-container {
     position: relative;
     resize: both;
-    max-width: 80vw;
-    max-height: 84vh;
+    height: 720px;
+    width: 887px;
+    min-height: 720px;
+    min-width: 887px;
+
+    &.maximized {
+        height: 96vh;
+        width: 98vw;
+    }
+    &.insufficient-history {
+        height: unset;
+        width: unset;
+        min-height: unset;
+        min-width: unset;
+    }
 
     .status-history {
         @include mat.button-density(-1);

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/status-history.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, DestroyRef, inject, Inject, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, DestroyRef, HostListener, inject, Inject, OnDestroy, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { StatusHistoryService } from '../../../service/status-history.service';
 import { AsyncPipe, NgStyle } from '@angular/common';
@@ -42,7 +42,7 @@ import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import * as d3 from 'd3';
-import { NifiTooltipDirective, NiFiCommon, TextTip, Resizable, CloseOnEscapeDialog } from '@nifi/shared';
+import { CloseOnEscapeDialog, NiFiCommon, NifiTooltipDirective, Resizable, TextTip } from '@nifi/shared';
 import { isDefinedAndNotNull } from 'libs/shared/src';
 import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
 import { Instance, NIFI_NODE_CONFIG, Stats } from './index';
@@ -80,6 +80,8 @@ export class StatusHistory extends CloseOnEscapeDialog implements OnInit, OnDest
     fieldDescriptors$ = this.store.select(selectStatusHistoryFieldDescriptors);
     fieldDescriptors: FieldDescriptor[] = [];
 
+    dialogMaximized = false;
+
     details: { key: string; value: string }[] = [];
 
     minDate = '';
@@ -214,6 +216,16 @@ export class StatusHistory extends CloseOnEscapeDialog implements OnInit, OnDest
             });
     }
 
+    maximize() {
+        this.dialogMaximized = true;
+        this.resized();
+    }
+
+    minimize() {
+        this.dialogMaximized = false;
+        this.resized();
+    }
+
     isInitialLoading(state: StatusHistoryState) {
         return state.loadedTimestamp === initialState.loadedTimestamp;
     }
@@ -263,6 +275,13 @@ export class StatusHistory extends CloseOnEscapeDialog implements OnInit, OnDest
         }
     }
 
+    @HostListener('window:resize', ['$event.target'])
+    windowResized() {
+        if (this.dialogMaximized) {
+            this.resized();
+        }
+    }
+
     getColor(stats: Stats, nodeId: string): string {
         if (stats.nodes && stats.nodes.length > 0) {
             const nodeColor = stats.nodes?.find((c) => c.id === nodeId);