ngx-hana-nameserver-history-viewer 21.1.1 → 21.1.2

package/README.md

@@ -22,7 +22,7 @@ npm install ngx-hana-nameserver-history-viewer --save
 
 ### Requirements
 
-The library depends on [ngx-selection-table](https://github.com/ckyycc/ngx-selection-table), [ngx-dropdown-list](https://github.com/ckyycc/ngx-dropdown-list), [moment-timezone](https://github.com/moment/moment-timezone), [papaparse](https://github.com/mholt/PapaParse), [nshviewer-angular-datetime-picker](https://github.com/ckyycc/date-time-picker), [chart.js](https://github.com/chartjs/Chart.js).
+The library depends on [ngx-selection-table](https://github.com/ckyycc/ngx-selection-table), [ngx-dropdown-list](https://github.com/ckyycc/ngx-dropdown-list), [date-fns](https://github.com/date-fns/date-fns), [papaparse](https://github.com/mholt/PapaParse), [nshviewer-angular-datetime-picker](https://github.com/ckyycc/date-time-picker), [chart.js](https://github.com/chartjs/Chart.js).
 
 The only file required is the ng-pick-datetime `picker.min.css` file:
 

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import { isDevMode, Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 import { SelectionModel } from '@angular/cdk/collections';
-import moment from 'moment-timezone';
+import { format } from 'date-fns';
+import { TZDateMini } from '@date-fns/tz';
 import { Chart, registerables, TimeScale, LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, Decimation } from 'chart.js';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-date-fns';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { parse } from 'papaparse';
 import * as i2 from 'nshviewer-angular-datetime-picker';
@@ -128,6 +129,25 @@ const _IGNORED_LINE_FROM_TAIL = 1;
  * 06: web dispatcher; 07: xsengine; 10 compileserver; 11 dpserver; 12 esserver; 29 xscontroller
  */
 const _NON_INDEX_SERVER_PORTS = ['01', '02', '04', '05', '06', '07', '10', '11', '12', '29'];
+const _HANA_SERVICES = {
+    indexserver: 'Index Server',
+    nameserver: 'Name Server',
+    compileserver: 'Compile Server',
+    preprocessor: 'Preprocessor Server',
+    webdispatcher: 'SAP Web Dispatcher',
+    scriptserver: 'Script Server',
+    docstore: 'Document Store Server',
+    diserver: 'HDI Server',
+    xsengine: 'XS Classic Server',
+    esserver: 'Extended Store Server',
+    dpserver: 'Data Provisioning Server',
+    streamingserver: 'Streaming Cluster',
+    etsserver: 'Accelerator for SAP ASE',
+    xscontroller: 'SAP HANA XS Controller',
+    xsexecagent: 'SAP HANA XS Execution Agent',
+    xsuaaserver: 'SAP HANA XS UAA'
+};
+const getHANAServiceDisplayName = (s) => (s ? (_HANA_SERVICES[s] ?? s) : "");
 /**
  * Get the ignored line number from tail (For some reason, hana studio will abandon the last line of nameserver history trace file).
  */
@@ -313,11 +333,37 @@ function _getTimeRange(time) {
     }
     return { startTime: 0, endTime: 0 };
 }
+function getEtcTimezones() {
+    // Add Etc timezones manually since Intl doesn't include them
+    const etcTimezones = [
+        'Etc/GMT+0', 'Etc/GMT+1', 'Etc/GMT+2', 'Etc/GMT+3', 'Etc/GMT+4', 'Etc/GMT+5', 'Etc/GMT+6',
+        'Etc/GMT+7', 'Etc/GMT+8', 'Etc/GMT+9', 'Etc/GMT+10', 'Etc/GMT+11', 'Etc/GMT+12', 'Etc/GMT-0',
+        'Etc/GMT-1', 'Etc/GMT-2', 'Etc/GMT-3', 'Etc/GMT-4', 'Etc/GMT-5', 'Etc/GMT-6',
+        'Etc/GMT-7', 'Etc/GMT-8', 'Etc/GMT-9', 'Etc/GMT-10', 'Etc/GMT-11', 'Etc/GMT-12',
+        'Etc/GMT-13', 'Etc/GMT-14'
+    ];
+    return [...etcTimezones, ...getZeroOffsetEtcZones()];
+}
+/**
+ * etc zones with 0 offset
+ */
+function getZeroOffsetEtcZones() {
+    return ['Etc/GMT', 'Etc/GMT0', 'Etc/Greenwich', 'Etc/UTC', 'Etc/UCT', 'Etc/Universal', 'Etc/Zulu'];
+}
 /**
  * get default local time zone
  */
-function getDefaultTimezone() {
-    return moment.tz.guess();
+function defaultTimezone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/**
+ *
+ * @returns get supported timezones from intl
+ */
+function supportedTimezones() {
+    const zones = Intl.supportedValuesOf('timeZone');
+    // Combine Intl zones with Etc zones
+    return [...zones, ...getEtcTimezones()];
 }
 /**
  * Get time from provided timezone, using this only because chart.js doesn't support timezone.
@@ -327,19 +373,48 @@ function getDefaultTimezone() {
  */
 function getTimeFromTimeZone(time, timezone) {
     if (timezone == null || timezone.length === 0) {
-        timezone = getDefaultTimezone();
+        timezone = defaultTimezone();
         console.warn(`getTimeFromTimeZone - Input timezone is null, returning the local (${timezone}) time. `);
     }
-    const utcOffset = moment.tz.zone(timezone).utcOffset(time * 1000);
-    const currentOffset = moment.tz.zone(getDefaultTimezone()).utcOffset(time * 1000);
+    // Get timezone offsets in milliseconds
+    const utcOffset = getOffset(timezone, time * 1000);
+    const currentOffset = getOffset(defaultTimezone(), time * 1000); // seconds
     // convert to utc and then to selected timezone
-    return time + currentOffset * 60 - utcOffset * 60;
+    return time + utcOffset - currentOffset;
+}
+/**
+ * get timezone offsests in seconds
+ */
+function getOffset(timezone, time) {
+    const date = new Date(time);
+    let offset;
+    // Handle Etc timezones specially since getTimezoneOffset doesn't support them
+    if (getZeroOffsetEtcZones().includes(timezone)) {
+        offset = 0;
+    }
+    else if (timezone.startsWith('Etc/GMT')) {
+        // Extract the offset from the zone name
+        // Note: Etc/GMT+X means UTC-X (opposite sign)
+        const match = timezone.match(/Etc\/GMT([+-])(\d+)/);
+        if (match) {
+            const sign = match[1];
+            const hours = parseInt(match[2], 10);
+            offset = (sign === '+' ? -hours : +hours) * 60 * 60;
+        }
+        else {
+            offset = 0;
+        }
+    }
+    else {
+        offset = (new TZDateMini(date, timezone)).getTimezoneOffset() * -60;
+    }
+    return offset;
 }
 /**
  * Get time formatted with the provided timezone
  */
 function getTimeString(time) {
-    return moment(time).format('YYYY-MM-DD HH:mm:ss');
+    return format(new Date(time), 'yyyy-MM-dd HH:mm:ss');
 }
 /**
  * Get the time range string by time array, eg: 2018-10-25 10:10:00 ~ 2018-10-25 12:12:00
@@ -673,13 +748,13 @@ class UIService {
         const networkOut = infoItem([Item.kpi, 'Network Out'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Network], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to network by all processes']);
         const swapIn = infoItem([Item.kpi, 'Swap In'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from swap by all processes (pswpin line in /proc/vmstat * sysconf(_SC_PAGESIZE))']);
         const swapOut = infoItem([Item.kpi, 'Swap Out'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written To swap by all processes (pswpout line in /proc/vmstat * sysconf(_SC_PAGESIZE))']);
-        const indexserverCpu = infoItem([Item.kpi, 'Index Server CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'CPU used by Service']);
+        const indexserverCpu = infoItem([Item.kpi, 'Service CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'CPU used by Service']);
         const indexserverCpuSys = infoItem([Item.kpi, 'System CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'OS Kernel/System CPU used by Service']);
         const indexserverMemUsed = infoItem([Item.kpi, 'Memory Used'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory used by Service']);
         const indexserverMemLimit = infoItem([Item.kpi, 'Memory Allocation Limit'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory allocation limit for Service']);
         const indexserverHandles = infoItem([Item.kpi, 'Handles'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open handles']);
         const indexserverPingtime = infoItem([Item.kpi, 'Ping Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.MS], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Duration of Service ping request (THREAD_METHOD=\'__nsWatchdog\'). This request includes the collection of service specific KPI\'s']);
-        const indexserverSwapIn = infoItem([Item.kpi, 'Index Server Swap In'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from swap by Service (column 12(majflt) in /proc/<pid>/stat * sysconf(_SC_PAGESIZE))']);
+        const indexserverSwapIn = infoItem([Item.kpi, 'Service Swap In'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from swap by Service (column 12(majflt) in /proc/<pid>/stat * sysconf(_SC_PAGESIZE))']);
         const sqlConnections = infoItem([Item.kpi, 'Open Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL connections']);
         const internalConnections = infoItem([Item.kpi, 'Internal Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL internal connections']);
         const externalConnections = infoItem([Item.kpi, 'External Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL external connections']);
@@ -823,7 +898,7 @@ class UIService {
         };
         return {
             'Host': loadHistoryInfoHost,
-            'Index Server': loadHistoryInfoIndexServer,
+            'Service': loadHistoryInfoIndexServer,
             'SQL': loadHistoryInfoSQL,
             'Row Store': loadHistoryInfoRowStore,
             'Column Store': loadHistoryInfoColumnStore,
@@ -1145,18 +1220,33 @@ class ChartService {
     /**
      * Generate DataSets by the data and header information
      */
-    static _generateDataSets(data, header, headerKey, defaultItems) {
+    static _generateDataSets(data, header, headerKey, defaultItems, yScale) {
         const alpha = 0.5;
         const colors = UIService.getColors(alpha);
         return data.map((item, i) => {
             const color = colors[headerKey[i]] ? getColorString(colors[headerKey[i]]) : randomColor(alpha);
+            // only cap 100 which is percentage
+            if (yScale[i] === 100) {
+                // to save some memory, change the value directly
+                //   cappedData = item.map(dp =>
+                //     dp.y > 100 ? { ...dp, y: 100, originalY: dp.y } : dp
+                //   );
+                // }
+                for (let j = 0, len = item.length; j < len; j++) {
+                    const dp = item[j];
+                    if (dp.y > 100) {
+                        dp.originalY = dp.y;
+                        dp.y = 100;
+                    }
+                }
+            }
             return {
                 borderColor: color,
                 backgroundColor: color,
                 borderWidth: 1,
                 spanGaps: false,
                 label: header[i],
-                data: data[i],
+                data: item,
                 fill: false,
                 yAxisID: `y-axis-${i}`,
                 hidden: !defaultItems.includes(header[i]),
@@ -1177,17 +1267,17 @@ class ChartService {
                 type: 'time',
                 time: {
                     displayFormats: {
-                        'millisecond': 'MMMDD HH:mm:ss',
-                        'second': 'MMMDD HH:mm:ss',
-                        'minute': 'MMMDD HH:mm',
-                        'hour': 'MMMDD HH',
-                        'day': 'MMMDD',
-                        'week': 'MMMDD',
-                        'month': 'MMM YYYY',
-                        'quarter': 'MMM YYYY',
-                        'year': 'MMM YYYY',
+                        'millisecond': 'MMMdd HH:mm:ss',
+                        'second': 'MMMdd HH:mm:ss',
+                        'minute': 'MMMdd HH:mm',
+                        'hour': 'MMMdd HH',
+                        'day': 'MMMdd',
+                        'week': 'MMMdd',
+                        'month': 'MMM yyyy',
+                        'quarter': 'MMM yyyy',
+                        'year': 'MMM yyyy',
                     },
-                    tooltipFormat: 'll HH:mm:ss'
+                    tooltipFormat: 'MMM dd, yyyy HH:mm:ss'
                 },
                 min: timeArray[0],
                 max: timeArray[timeArray.length - 1],
@@ -1195,10 +1285,7 @@ class ChartService {
                     source: 'auto',
                     maxRotation: 0,
                     autoSkip: true,
-                    // callback: function(val, index) {
-                    //   // Hide every 2nd tick label
-                    //   return  index % 2 === 0? this.getLabelForValue(val) : '';
-                    // },
+                    autoSkipPadding: 40, // label space
                 },
                 reverse: false
             }
@@ -1225,7 +1312,7 @@ class ChartService {
         return {
             type: 'line',
             data: {
-                datasets: ChartService._generateDataSets(data, header, headerKey, defaultItems)
+                datasets: ChartService._generateDataSets(data, header, headerKey, defaultItems, yScale)
             },
             options: {
                 layout: {
@@ -1234,9 +1321,9 @@ class ChartService {
                     }
                 },
                 interaction: {
-                    intersect: true, // true means not a range hit
+                    intersect: true, // true means must actually hover over a point
                     axis: 'x',
-                    mode: 'nearest'
+                    mode: 'index' // when intersecting, show all datasets at the same index/x position
                 },
                 responsive: true,
                 animation: false, // must disable it otherwise zoomin will hang
@@ -1268,6 +1355,8 @@ class ChartService {
                         text: title
                     },
                     tooltip: {
+                        mode: 'nearest',
+                        intersect: true, // true means only show tooltip for the closest point
                         callbacks: {
                             label: function (context) {
                                 // format numbers with commas and add unit information
@@ -1276,10 +1365,14 @@ class ChartService {
                                     // get unit (eg: MB, GB, MB/s, % and so on)
                                     const rowItem = tableSource.find(controlTableRow => label === controlTableRow.KPI) || '';
                                     const unit = rowItem[Item.unit] && rowItem[Item.unit] !== Unit.PCT ? ` ${rowItem[Item.unit]}` : rowItem[Item.unit] || '';
-                                    return `${label}: ${getNumberWithCommas(context.parsed.y)}${unit}`;
+                                    // Use original value if available, otherwise use displayed value
+                                    const valueToShow = context.raw?.originalY ?? context.parsed.y;
+                                    return `${label}: ${getNumberWithCommas(valueToShow)}${unit}`;
                                 }
                                 else {
-                                    return getNumberWithCommas(context.parsed.y);
+                                    // Use original value if available, otherwise use displayed value
+                                    const valueToShow = context.raw?.originalY ?? context.parsed.y;
+                                    return getNumberWithCommas(valueToShow);
                                 }
                             }
                         }
@@ -1288,7 +1381,7 @@ class ChartService {
                     decimation: {
                         enabled: true,
                         algorithm: 'lttb', // Largest-Triangle-Three-Buckets algorithm
-                        samples: 500, // Increased samples for better quality
+                        samples: 600, // Increased samples for better quality
                         threshold: 1 // increase it may hang the ui due to swith of using/not using downsampling, disable it (set it to 0), will slowdown average zoom in.
                     },
                     zoom: {
@@ -2265,15 +2358,15 @@ class TimezoneSelectorService {
     /**
      * get the default timezone
      */
-    getDefaultTimezone() {
-        return getDefaultTimezone();
+    get defaultTimezone() {
+        return defaultTimezone();
     }
     /**
      * Get all the timezones for each region
      */
     getZones() {
         const timezones = [];
-        const zones = moment.tz.names();
+        const zones = supportedTimezones();
         zones.forEach(zone => {
             // get region
             let region;
@@ -2284,6 +2377,16 @@ class TimezoneSelectorService {
         });
         return timezones;
     }
+    getFormattedZone(region, zone) {
+        return `${region} - ${this._formatTimezone(zone)} ${this._getOffset(zone)}`;
+    }
+    _getOffset(zone) {
+        const offsetMinutes = getOffset(zone, Date.now()) / 60;
+        const absOffset = Math.abs(offsetMinutes);
+        const hours = Math.floor(absOffset / 60);
+        const minutes = absOffset % 60;
+        return `(GMT${offsetMinutes < 0 ? '-' : '+'}${this._formatNumber(hours)}:${this._formatNumber(minutes)})`;
+    }
     /**
      * build timezone lists
      */
@@ -2297,6 +2400,13 @@ class TimezoneSelectorService {
             timezoneRegion.zones.push(zone);
         }
     }
+    _formatTimezone(zone) {
+        const tz = zone.split('/');
+        return tz[tz.length - 1].replace('_', ' ');
+    }
+    _formatNumber(number) {
+        return number < 10 || !number ? `0${number}` : `${number}`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TimezoneSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TimezoneSelectorService }); }
 }
@@ -2305,40 +2415,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }] });
 
 class TimezoneSelectorComponent {
-    static _formatNumber(number) {
-        return number < 10 || !number ? `0${number}` : `${number}`;
-    }
     constructor(service) {
         this.service = service;
         this.disabled = false;
         this.timezoneChange = new EventEmitter();
-        const defaultTZ = this.service.getDefaultTimezone();
-        this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this._getFormattedZone(tz.region, zone), selected: zone === defaultTZ })) }));
+        const defaultTZ = this.service.defaultTimezone;
+        this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this.service.getFormattedZone(tz.region, zone), selected: zone === defaultTZ })) }));
     }
     ngOnChanges(changes) {
         if (changes['timezone'] && changes['timezone'].currentValue) {
             if (this.timezones) {
-                this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this._getFormattedZone(tz.region, zone), selected: zone === changes['timezone'].currentValue })) }));
+                this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this.service.getFormattedZone(tz.region, zone), selected: zone === changes['timezone'].currentValue })) }));
             }
         }
     }
-    _getFormattedZone(region, zone) {
-        return `${region} - ${this._formatTimezone(zone)} ${this._getOffset(zone)}`;
-    }
-    _formatTimezone(zone) {
-        const tz = zone.split('/');
-        return tz[tz.length - 1].replace('_', ' ');
-    }
-    _getOffset(zone) {
-        let offset = moment.tz(zone).utcOffset();
-        const neg = offset < 0;
-        if (neg) {
-            offset = -1 * offset;
-        }
-        const hours = Math.floor(offset / 60);
-        const minutes = (offset / 60 - hours) * 60;
-        return `(GMT${neg ? '-' : '+'}${TimezoneSelectorComponent._formatNumber(hours)}:${TimezoneSelectorComponent._formatNumber(minutes)})`;
-    }
     /**
      * onChange function called by the "ngx-select" element
      * @param selectedTimezone The timezone string selected
@@ -2470,6 +2560,10 @@ class NameServerHistoryComponent {
          * Input (optional) bind to [showInstruction]
          */
         this.showInstruction = true;
+        /**
+         * update timezone value
+         */
+        this.timezoneChange = new EventEmitter();
         /**
          * time info of the name server history file
          */
@@ -2634,6 +2728,14 @@ class NameServerHistoryComponent {
         const nameserverHistoryContentElement = this.nameserverHistoryContentRef ? this.nameserverHistoryContentRef.nativeElement : null;
         setChartHeight(nameserverHistoryAllElement, nameserverHistoryContentElement);
     }
+    /**
+     * Handle timezone change from timezone-selector
+     * @param newTimezone the new timezone value
+     */
+    onTimezoneChange(newTimezone) {
+        this.timezone = newTimezone;
+        this.timezoneChange.emit(newTimezone);
+    }
     /**
      * Switch port and reinitialize chart, triggered by changing the port
      * @param port the selected port
@@ -2659,7 +2761,7 @@ class NameServerHistoryComponent {
             ]);
             // init the environment with switch flag
             this._initChartEnv(true).then(() => {
-                return this._buildChart(port, null, true);
+                return this._buildChart(port, null, this.servicePortInfo?.[this.host]?.[port], true);
             }).catch(e => this._showMessage(Alert.error, e));
         }
     }
@@ -2673,7 +2775,7 @@ class NameServerHistoryComponent {
      * get default timezone
      */
     get defaultTimezone() {
-        return getDefaultTimezone();
+        return defaultTimezone();
     }
     /**
      * get the key column (KPI)
@@ -2783,7 +2885,7 @@ class NameServerHistoryComponent {
                     }
                 }
                 return sleep(100).then(() => {
-                    return this._buildChart(port, ports);
+                    return this._buildChart(port, ports, this.servicePortInfo?.[this.host]?.[port]);
                 });
             });
         });
@@ -2819,12 +2921,13 @@ class NameServerHistoryComponent {
      * build and display the chart on page
      * @param port the selected port
      * @param ports all available ports
+     * @param service service name
      * @param switchFlag indicates whether this function is triggered from switching ports (no init port selector needed)
      */
-    _buildChart(port, ports, switchFlag = false) {
+    _buildChart(port, ports, service, switchFlag = false) {
         const beginTime = new Date();
         if (port) {
-            return Promise.resolve(this._loadSettingsForSelectionsTable(port))
+            return Promise.resolve(this._loadSettingsForSelectionsTable(port, service))
                 .then(() => {
                 // get the config
                 return this.chartService.buildChart(this.time[port], this.data[port], this.uiService.getYScale(this._headerKey, port), this._headerText, this._headerKey, this._selection, this.tableSource, this._getHostTitle(port), this.uiService.getDisplayItems(this._headerKey, port, this.defaultSelectedItems), this._onZoom.bind(this))
@@ -2911,8 +3014,9 @@ class NameServerHistoryComponent {
      * Load settings for the selection table (the right part of the chart)
      * @param port the selected port
      */
-    _loadSettingsForSelectionsTable(port) {
+    _loadSettingsForSelectionsTable(port, service) {
         this.tableSource = this.uiService.getSelectionTableRows(this._headerKey, port, this.defaultSelectedItems);
+        this._updateServiceHeader(port, service);
         this._selection = new SelectionModel(true, []);
         this.tableSource.forEach(row => {
             if (this.uiService.getDisplayItems(this._headerKey, port, this.defaultSelectedItems).includes(row.KPI)) {
@@ -2920,6 +3024,17 @@ class NameServerHistoryComponent {
             }
         });
     }
+    /**
+     * Replace confusing service type, issue: https://github.com/ckyycc/ngx-hana-nameserver-history-viewer/issues/14
+     * by default will replaced it with Service (port), eg: Service (30015)
+     *if topology is imported, it will be: Name Server (30001) or Index Server (30040), and so on...
+     */
+    _updateServiceHeader(port, service) {
+        const serviceHeader = this.tableSource.find(ts => ts[this.kpiColumn] === 'Service' && ts.header);
+        if (serviceHeader) {
+            serviceHeader[this.kpiColumn] = `${getHANAServiceDisplayName(service) || 'Service'} (${port})`;
+        }
+    }
     /**
      * Show messages
      * @param type type of the message
@@ -2969,11 +3084,11 @@ class NameServerHistoryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NameServerHistoryComponent, deps: [{ token: FileService }, { token: ChartService }, { token: UIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NameServerHistoryComponent, isStandalone: true, 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\" class=\"box-stream-mode-text\">{{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}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }, { kind: "component", type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { kind: "component", type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { kind: "component", type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { kind: "component", type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { kind: "component", type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { kind: "component", type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { kind: "component", type: SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "ngmodule", type: OwlNativeDateTimeModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NameServerHistoryComponent, isStandalone: true, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName", autoDisplay: "autoDisplay", servicePortInfo: "servicePortInfo" }, outputs: { timezoneChange: "timezoneChange" }, 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\" class=\"box-stream-mode-text\">{{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\" (timezoneChange)=\"onTimezoneChange($event)\" [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}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }, { kind: "component", type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { kind: "component", type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { kind: "component", type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { kind: "component", type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { kind: "component", type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { kind: "component", type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { kind: "component", type: SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "ngmodule", type: OwlNativeDateTimeModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NameServerHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-hana-nameserver-history-viewer', providers: [FileService, ChartService, UIService], standalone: true, imports: [CommonModule, AlertComponent, TimezoneSelectorComponent, TimeRangeSelectorComponent, ProgressBarComponent, PortSelectorComponent, InstructionComponent, FileDropInputComponent, SelectionTableComponent, OwlDateTimeModule, OwlNativeDateTimeModule], 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\" class=\"box-stream-mode-text\">{{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}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{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], standalone: true, imports: [CommonModule, AlertComponent, TimezoneSelectorComponent, TimeRangeSelectorComponent, ProgressBarComponent, PortSelectorComponent, InstructionComponent, FileDropInputComponent, SelectionTableComponent, OwlDateTimeModule, OwlNativeDateTimeModule], 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\" class=\"box-stream-mode-text\">{{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\" (timezoneChange)=\"onTimezoneChange($event)\" [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}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{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: () => [{ type: FileService }, { type: ChartService }, { type: UIService }], propDecorators: { nameserverHistoryAllRef: [{
                 type: ViewChild,
                 args: ['nameserverHistoryAll', { read: ElementRef }]
@@ -2996,11 +3111,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], autoDisplay: [{
                 type: Input
+            }], servicePortInfo: [{
+                type: Input
+            }], timezoneChange: [{
+                type: Output
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NameServerHistoryComponent };
+export { NameServerHistoryComponent, supportedTimezones };
 //# sourceMappingURL=ngx-hana-nameserver-history-viewer.mjs.map