ngx-hana-nameserver-history-viewer 1.1.9-9.2.beta → 1.1.9-9.5.beta

package/fesm2020/ngx-hana-nameserver-history-viewer.mjs

@@ -3538,12 +3538,16 @@ class NameServerHistoryComponent {
             { id: HtmlElement.resetChartButton, status: false }
         ]);
     }
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         const fbc = changes.fileBuffer;
         if (fbc && fbc.currentValue && fbc.currentValue !== fbc.previousValue) {
             // simulate selecting file
             const simulatedEvent = { target: { files: [blobToFile(this.fileBuffer, this.streamModeFileName)] } };
-            this.fileSelected(simulatedEvent);
+            await this.fileSelected(simulatedEvent);
+            this.port = undefined; // clear the port selection
+            if (this.autoDisplay) {
+                this.showChart();
+            }
         }
     }
     /**
@@ -3600,12 +3604,12 @@ class NameServerHistoryComponent {
     /**
      * select name server history file, currently only supports 1 file.
      */
-    fileSelected(event) {
+    async fileSelected(event) {
         const selectedFile = getFileFromInput(event.target);
         if (selectedFile) {
             if (!isSameFile(this.file, selectedFile)) {
                 // init port selector
-                this._initPortSelector().catch(e => this._showMessage(Alert.error, e));
+                await this._initPortSelector().catch(e => this._showMessage(Alert.error, e));
                 this.file = selectedFile;
                 this.abbreviatedFileName = getAbbreviatedFileName(this.file.name);
                 // after file has been selected, the show chart button needs to be enabled
@@ -3985,10 +3989,10 @@ class NameServerHistoryComponent {
     }
 }
 NameServerHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, deps: [{ token: FileService }, { token: ChartService }, { token: UIService }], target: i0.ɵɵFactoryTarget.Component });
-NameServerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NameServerHistoryComponent, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName" }, providers: [FileService, ChartService, UIService], viewQueries: [{ propertyName: "nameserverHistoryAllRef", first: true, predicate: ["nameserverHistoryAll"], descendants: true, read: ElementRef }, { propertyName: "nameserverHistoryContentRef", first: true, predicate: ["nameserverHistoryContent"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"], components: [{ type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { type: i8.SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+NameServerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NameServerHistoryComponent, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName", autoDisplay: "autoDisplay" }, providers: [FileService, ChartService, UIService], viewQueries: [{ propertyName: "nameserverHistoryAllRef", first: true, predicate: ["nameserverHistoryAll"], descendants: true, read: ElementRef }, { propertyName: "nameserverHistoryContentRef", first: true, predicate: ["nameserverHistoryContent"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\" style=\"padding-top:13px\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"], components: [{ type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { type: i8.SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-hana-nameserver-history-viewer', providers: [FileService, ChartService, UIService], template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"] }]
+            args: [{ selector: 'ngx-hana-nameserver-history-viewer', providers: [FileService, ChartService, UIService], template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\" style=\"padding-top:13px\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: FileService }, { type: ChartService }, { type: UIService }]; }, propDecorators: { nameserverHistoryAllRef: [{
                 type: ViewChild,
                 args: ['nameserverHistoryAll', { read: ElementRef }]
@@ -4009,6 +4013,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], streamModeFileName: [{
                 type: Input
+            }], autoDisplay: [{
+                type: Input
             }] } });
 
 class NameserverHistoryModule {