ngx-hana-nameserver-history-viewer 1.1.3 → 1.1.9-3.beta

package/src/nameserver-history-viewer/components/instruction/instruction.component.ts

@@ -1,30 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-
-@Component({
-  selector: 'instruction',
-  templateUrl: './instruction.component.html',
-  styleUrls: ['./instruction.component.scss']
-})
-
-export class InstructionComponent {
-  @Input()
-  step1Finished = false;
-  @Input()
-  step2Finished = false;
-  @Input()
-  step3Finished = false;
-  @Input()
-  step4Finished = false;
-  @Input()
-  step5Finished = false;
-  @Input()
-  show = true;
-  /**
-   * Output event bind to (show)
-   */
-  @Output() showChange = new EventEmitter<boolean>();
-  onClose() {
-    this.show = false;
-    this.showChange.emit(this.show);
-  }
-}

package/src/nameserver-history-viewer/components/nameserver-history.component.html

@@ -1,70 +0,0 @@
-<div #nameserverHistoryAll class="nameserver-history-all" (window:resize)="onResize()">
-  <div class="toolbar-chart">
-    <div class="upload-box-content">
-      <div *ngIf="!showReadFileProgress">
-        <file-drop-input (fileDrop)="fileDropped($event)" (fileInput)="fileSelected($event)"
-                         [dropAreaText]= "abbreviatedFileName"
-                         [inputAreaText]="'Browse'"
-                         [title]="file?.name? file.name:'Select a name server history file from your local disk.'">
-        </file-drop-input>
-      </div>
-      <div *ngIf="showReadFileProgress">
-        <progress-bar [progress]="readProgress"></progress-bar>
-      </div>
-    </div>
-    <div class="input-time">
-     <div class="input-time-range">
-       <time-range-selector [disabled]="showReadFileProgress" [(dateTimeRange)]="dateTimeRange"></time-range-selector>
-     </div>
-      <div class="timezone-selector">
-        <timezone-selector [(timezone)]="timezone" [disabled]="showReadFileProgress"></timezone-selector>
-      </div>
-    </div>
-
-    <div class="port-selection">
-      <div class="port-selector">
-        <port-selector (portChange)="switchPortForChart($event)" [(port)]="port" [ports]="ports" [disabled]="showReadFileProgress"></port-selector>
-      </div>
-      <div class="port-load-button">
-        <button (click)="loadPorts()" title="Load all ports from name server history trace file." [disabled]="!enableShowChartButton || port || !enableLoadPortsButton">{{showReadFileProgress? "Loading..." : "Load"}}</button>
-      </div>
-    </div>
-
-    <div class="chart-operation">
-      <div class="left">
-        <button (click)="showChart()" title="Load and display all data from name server history trace file." [disabled]="!enableShowChartButton">{{showReadFileProgress? "Loading..." : "Show"}}</button>
-      </div>
-      <div class="right">
-        <button (click)="resetChart()" title="Reset zoom of chart." [disabled]="showReadFileProgress || !enableResetChartButton">Reset Chart</button>
-      </div>
-    </div>
-  </div>
-  <div #nameserverHistoryContent class="nameserver-history-content">
-    <div class="nameserver-history-content-chart">
-      <instruction [(show)]="showInstruction" *ngIf="!showChartFlag && showInstruction"
-                   [step1Finished]="file"
-                   [step2Finished]="dateTimeRange && (dateTimeRange[0] || dateTimeRange[1]) || timezone != defaultTimezone"
-                   [step3Finished]="port"
-                   [step4Finished]="stepShowChart && !enableShowChartButton"
-                   [step5Finished]="false">
-      </instruction>
-      <canvas id="chartNameServerHistory" ></canvas>
-    </div>
-    <div class="nameserver-history-content-controller" >
-      <ngx-selection-table (change)="selectItem($event)" *ngIf="showChartFlag"
-                           [filter]="true"
-                           [checkbox]="true"
-                           [tableSource]="tableSource"
-                           [keyColumn]="kpiColumn"
-                           [hiddenColumns]="hiddenColumns"
-                           [tooltipColumn]="descColumn"
-                           [searchStyle]="'searchAll'"
-                           [searchColumn]="kpiColumn"
-                           [multiSelection]="true">
-      </ngx-selection-table>
-    </div>
-  </div>
-</div>
-<div class="message-container" *ngIf="alertMessage">
-  <alert [(alertMessage)]="alertMessage" [alertType]="alertType" [alertTimeout]="30000"></alert>
-</div>

package/src/nameserver-history-viewer/components/nameserver-history.component.scss

@@ -1,191 +0,0 @@
-:host {
-  $defaultFontSize: 14px;
-  $defaultBorderRadius: 4px;
-  $defaultFontWeight: 400;
-  $defaultDashedBorderColor: #0782d0;
-
-  *, *:before, *:after {
-    box-sizing: inherit;
-    display: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    font-family: inherit;
-  }
-
-  .hover-box {
-    outline: 0;
-    box-shadow: 0 0 6px rgba(35, 173, 278, 1);
-  }
-  .dashed-box {
-    background: #f8f8f8;
-    box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, .6);
-    border: 1px dashed $defaultDashedBorderColor;
-  }
-  .solid-box {
-    background: #fff none;
-    border: 1px solid #ccc;
-    border-radius: $defaultBorderRadius;
-    line-height: 1.42857143;
-  }
-
-  .nameserver-history-all {
-    width: 98%;
-    min-width: 1314px;
-    height: auto;
-    border: 1px none $defaultDashedBorderColor;
-    border-bottom-style: dashed;
-    margin: 3px 1% 3px 1%;
-    box-sizing: border-box;
-    display: inline-block;
-    font-size: $defaultFontSize;
-    font-weight: $defaultFontWeight;
-    font-family: Helvetica, Arial, sans-serif;
-
-    /*BAR AREA*/
-    .toolbar-chart {
-      width: 100%;
-      height: 48px;
-
-      button {
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: middle;
-
-        &:hover {
-          text-shadow: 1px 1px 3px royalblue;
-          cursor: pointer;
-          font-weight: 600;
-        }
-        &:disabled {
-          text-shadow: none;
-          opacity: .65;
-          cursor: default;
-          color: darkgrey;
-          font-weight: $defaultFontWeight;
-        }
-      }
-
-      .upload-box-content {
-        width: 20%;
-        height: 100%;
-        float: left;
-        @extend .dashed-box;
-      }
-
-      /*BAR AREA -- CENTER LEFT -- DATE/TIMEZONE SELECTOR*/
-      .input-time {
-        margin-left: 1%;
-        margin-right: 1%;
-        width: 43%;
-        height: 100%;
-        @extend .dashed-box;
-        .input-time-range {
-          height: 100%;
-          width: 57%;
-          float: left;
-        }
-
-        .timezone-selector {
-          margin-top: 6px;
-          height: 100%;
-          width: 42.5%;
-          margin-right: 0.5%;
-          float: right;
-        }
-      }
-
-      /*BAR AREA -- CENTER RIGHT-- PORT SELECTOR*/
-      .port-selection {
-        width: 14%;
-        margin-right: 1%;
-        height: 48px;
-        @extend .dashed-box;
-
-        .port-selector {
-          margin-top: 6px;
-          margin-left: 2%;
-          margin-right: 1%;
-          width: 47%;
-          float: left;
-        }
-
-        .port-load-button {
-          margin-top: 6px;
-          margin-left: 1%;
-          margin-right: 2%;
-          width: 47%;
-          float: right;
-          button {
-            color: #333;
-            width: 100%;
-            padding: 6px 12px;
-            margin-bottom: 0;
-            @extend .solid-box;
-            &:hover {
-              text-shadow: None;
-              font-weight: $defaultFontWeight;
-              @extend .hover-box;
-            }
-            &:disabled {
-              box-shadow: none;
-            }
-          }
-        }
-      }
-
-      /*BAR AREA -- RIGHT -- CHART OPERATION AREA*/
-      .chart-operation {
-        width: 20%;
-        height: 48px;
-        float: right;
-        .left {
-          margin-right: 1%;
-          width: 49%;
-          height: 100%;
-          float: left;
-        }
-        .right {
-          width: 50%;
-          height: 100%;
-          float: right;
-        }
-        button {
-          width: 100%;
-          height: 100%;
-          color: darkblue;
-          @extend .dashed-box;
-        }
-      }
-    }
-
-    /*CHART AREA*/
-    .nameserver-history-content {
-      width: 100%;
-      height: 730px;
-      margin: 5px 5px 5px 0;
-      .nameserver-history-content-chart {
-        width: 75%;
-        height: 100%;
-        position: relative;
-        float: left;
-      }
-      .nameserver-history-content-controller {
-        width: 25%;
-        height: 100%;
-        float: right;
-        overflow: auto;
-      }
-    }
-  }
-
-  /**alert message area**/
-  .message-container {
-    width: 98%;
-    margin: 0 1% 0 1%;
-    box-sizing: border-box;
-    display: inline-block;
-  }
-}
-
-
-

package/src/nameserver-history-viewer/components/nameserver-history.component.spec.ts

@@ -1,193 +0,0 @@
-import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { NameServerHistoryComponent } from './nameserver-history.component';
-import { FSSpecHelper } from '../services/file.service.spec';
-import { ChartService, FileService, UIService } from '../services';
-import { Alert } from '../types';
-import * as utils from '../utils';
-
-describe('NameServerHistoryComponent', () => {
-  let component: NameServerHistoryComponent;
-  let event;
-  let mdcFile;
-  let spyNameServerHistoryComponent;
-  let spyUtil;
-  beforeEach(() => {
-    mdcFile = FSSpecHelper.getMdcFile();
-    event = {};
-    event['target'] = {};
-    TestBed.configureTestingModule({providers: [NameServerHistoryComponent, FileService, ChartService, UIService]});
-    component = TestBed.get(NameServerHistoryComponent);
-
-    spyNameServerHistoryComponent = jasmine.createSpyObj(
-      'NameServerHistoryComponent', ['_buildChartFromDataFile', '_readPortsFromFile', '_initChartEnv', '_buildChart']);
-
-    // set spy on _readPortsFromFile
-    spyNameServerHistoryComponent['_readPortsFromFile'].and.returnValue(Promise.resolve(''));
-    // set spy on _initChartEnv
-    spyNameServerHistoryComponent['_initChartEnv'].and.returnValue(Promise.resolve(''));
-    // set spy on _buildChartFromDataFile
-    spyNameServerHistoryComponent['_buildChartFromDataFile'].and.returnValue(Promise.resolve(''));
-    // spyNameServerHistoryComponent['_buildChart'].and.returnValue(Promise.resolve(''));
-
-
-    // set spy on getFileFromDrop (file-util.ts)
-    // jasmine.createSpy('getFileFromDrop').and.returnValue(Promise.resolve(mdcFile));
-    spyOn(utils, 'getFileFromDrop').and.returnValue(Promise.resolve(mdcFile));
-    // set spy on getTimeRangeString (file-util.ts)
-    spyOn(utils, 'getTimeRangeString').and.returnValue('2000-01-01 ~ 2000-01-02');
-    // set spy on isEmptyData (ui-util.ts)
-    spyUtil = spyOn(utils, 'isEmptyData').and.returnValue(false);
-
-    // set spy on resetChart (chartService)
-    spyOn(ChartService.prototype, 'resetChart').and.returnValue(Promise.resolve(''));
-    // set spy on destroyChart(chartService)
-    spyOn(ChartService.prototype, 'destroyChart').and.returnValue(Promise.resolve(''));
-    // // set spy on convertUnitAndGenerateControlData(uiService)
-    // spyOn(UIService.prototype, 'convertUnitAndGenerateControlData').and.returnValue(Promise.resolve(''));
-    // // set spy on getHeader(uiService)
-    // spyOn(UIService.prototype, 'getHeader').and.returnValue([{headerKey: 'key1', headerText: 'test1'}]);
-    // spyOn(UIService.prototype, 'getYScale').and.returnValue('');
-
-  });
-  it('#01 fileSelected: should skip the same file', () => {
-    const file = FSSpecHelper.getMdcFile();
-    event['target'].files = [file];
-    component.file = file;
-    component.fileSelected(event);
-    expect(component.abbreviatedFileName).toEqual('or Drop File Here');
-    expect(component.enableShowChartButton).toBeFalsy();
-  });
-  it('#02 fileSelected: should not skip if the selected file is a different one', () => {
-    event['target'].files = [FSSpecHelper.getMdcFile()];
-    component.file = FSSpecHelper.getNonMdcFile();
-    component.fileSelected(event);
-    expect(component.abbreviatedFileName).toEqual(utils.getAbbreviatedFileName('mdcNameServerHistory.trc'));
-    expect(component.enableShowChartButton).toBeTruthy();
-  });
-  it('#03 fileDropped: should skip the same file', fakeAsync(() => {
-    component.abbreviatedFileName = 'or Drop File Here';
-    component.file = mdcFile;
-    component.fileDropped(event);
-    tick();
-    expect(component.abbreviatedFileName).toEqual('or Drop File Here');
-    expect(component.enableShowChartButton).toBeFalsy();
-  }));
-  it('#04 fileDropped: should not skip if the selected file is a different one', fakeAsync(() => {
-    component.file = FSSpecHelper.getNonMdcFile();
-    component.fileDropped(event);
-    tick();
-    expect(component.abbreviatedFileName).toEqual(utils.getAbbreviatedFileName('mdcNameServerHistory.trc'));
-    expect(component.enableShowChartButton).toBe(true);
-  }));
-  it('#05 loadPorts: should disable showChartButton and enable progress bar', () => {
-    component.file = FSSpecHelper.getMdcFile();
-    component.loadPorts();
-    expect(component.showReadFileProgress).toBe(true);
-    expect(component.enableShowChartButton).toBe(false);
-  });
-  it(`#06 _initPortSelector: should: 1. set the progress to 0; 2. enable showChartButton; 3. disable progress bar when (1) loading ports or (2) the file does not contain the selected Port`, (done: DoneFn) => {
-    component['_initPortSelector'](['30001', '30015']).then(() => {
-      expect(component.readProgress).toBe(0);
-      expect(component.showReadFileProgress).toBe(false);
-      expect(component.enableShowChartButton).toBe(true);
-      done();
-    });
-  });
-  it('#07 resetChart: should disable resetChartButton', () => {
-    component.resetChart();
-    expect(component.enableResetChartButton).toBe(false);
-  });
-  it('#08 showChart: should disable resetChartButton and showChartButton', () => {
-    component.showChart();
-    expect(component.enableResetChartButton).toBe(false);
-    expect(component.enableShowChartButton).toBe(false);
-  });
-  it('#09 showChart: should display error message if start time > end time', fakeAsync(() => {
-    component.dateTimeRange = [new Date(1323232323200), new Date(1223232320000)];
-    component.showChart();
-    tick();
-    expect(component.alertMessage).toEqual('Time range is not correct.');
-    expect(component.alertType).toEqual(Alert.error);
-  }));
-  it('#10 showChart: should enable readFileProgress if file is selected', fakeAsync(() => {
-    component.file = mdcFile;
-    component.showChart();
-    tick();
-    expect(component.showReadFileProgress).toBeTruthy();
-  }));
-  it('#11 _initChartEnv: should hide chartArea', (done: DoneFn) => {
-    component.file = mdcFile;
-    component['_initChartEnv']().then(() => {
-      expect(component.showChartFlag).toBe(false);
-      done();
-    });
-  });
-  it('#12 _initChartEnv: should clear all other objects when not switching port', (done: DoneFn) => {
-    component.file = mdcFile;
-    component.time = {'30001': [1, 2, 3]};
-    component.data = {'30001': [[{x: 1, y: 2}]]};
-    component.header = [{key: 'test', text: 'test'}];
-    component.host = 'TEST';
-    component.tableSource = ['TEST'];
-    component['_initChartEnv']().then(() => {
-      expect(component.time).toEqual({});
-      expect(component.data).toEqual({});
-      expect(component.header).toEqual([]);
-      expect(component.host).toEqual('nameserver history file');
-      expect(component.tableSource).toEqual(undefined);
-      done();
-    });
-  });
-  it('#13 _initChartEnv: should not clear other objects when doing switch port', (done: DoneFn) => {
-    component.file = mdcFile;
-    component.time = {'30001': [1, 2, 3]};
-    component.data = {'30001': [[{x: 1, y: 2}]]};
-    component.header = [{key: 'test', text: 'test'}];
-    component.host = 'TEST';
-    component.tableSource = ['TEST'];
-    component['_initChartEnv'](true).then(() => {
-      expect(component.time).toEqual({'30001': [1, 2, 3]});
-      expect(component.data).toEqual({'30001': [[{x: 1, y: 2}]]});
-      expect(component.header).toEqual([{key: 'test', text: 'test'}]);
-      expect(component.host).toEqual('TEST');
-      expect(component.tableSource).toEqual( ['TEST']);
-      done();
-    });
-  });
-  it('#14 switchPortForChart: should show warning message if data does not exist', () => {
-    component.time = {'30001': [1111, 2222], '30003': [1111, 2222]};
-    component.file = mdcFile;
-    const port = '30007';
-    component.switchPortForChart(port);
-    expect(component.alertMessage).toEqual(`Data of port:${port} is not loaded, please load the data first by clicking the "Show" button.`);
-    expect(component.alertType).toEqual(Alert.info);
-  });
-  it('#15 switchPortForChart: should disable the showChart button and the resetChart button', () => {
-    component.time = {'30001': [1111, 2222], '30003': [1111, 2222]};
-    component.file = mdcFile;
-    component.switchPortForChart('30001');
-    expect(component.enableShowChartButton).toBe(false);
-    expect(component.enableResetChartButton).toBe(false);
-  });
-
-  // it('#_buildChartFromDataFile: should show Maximum number of lines reached if result gets aborted', fakeAsync(() => {
-  //   // set spy on getChartContentFromFile(fileService)
-  //   spyOn(FileService.prototype, 'getChartContentFromFile').and.returnValue(Promise.resolve({time: {'30001': [21000000000, 21000000000]},
-  //     data: {'30001': [21000000000, 21000000000]}, header: ['1', '2'], aborted: true}));
-  //   component['_buildChartFromDataFile'](null, null, null, null);
-  //   tick(15000);
-  //   expect(component.alertMessage).toEqual('Maximum number of lines reached. Processed time range is: 2000-01-01 ~ 2000-01-02.');
-  //   expect(component.alertType).toEqual(Alert.warning);
-  // }));
-
-  // it('#showChart: should catch and display error message (and hide the readFileProgress) if error occurs', fakeAsync(() => {
-  //   // spyNameServerHistoryComponent['_buildChartFromDataFile'].and.returnValue(Promise.reject('In testing: error occurs!'));
-  //   spyNameServerHistoryComponent['_initChartEnv'].and.callFake(() => Promise.reject('In testing: error occurs!'));
-  //   component.file = mdcFile;
-  //   component.showChart();
-  //   tick();
-  //   expect(component.alertMessage).toEqual('In testing: error occurs!');
-  //   expect(component.alertType).toEqual(Alert.error);
-  //   expect(component.showReadFileProgress).toBe(false);
-  // }));
-});