Code Review / so.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | review | tree
raw | inline | side by side
SO Monitoring UI
[so.git] / so-monitoring / so-monitoring-ui / src / main / frontend / src / app / home / home.component.html
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html
new file mode 100644 (file)
index 0000000..6adea3b
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html
@@ -0,0 +1,187 @@
+<!--\r
+============LICENSE_START=======================================================\r
+Copyright (C) 2018 Ericsson. All rights reserved.\r
+================================================================================\r
+Licensed under the Apache License, Version 2.0 (the "License");\r
+you may not use this file except in compliance with the License.\r
+You may obtain a copy of the License at\r
+\r
+    http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+Unless required by applicable law or agreed to in writing, software\r
+distributed under the License is distributed on an "AS IS" BASIS,\r
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+See the License for the specific language governing permissions and\r
+limitations under the License.\r
+\r
+SPDX-License-Identifier: Apache-2.0\r
+============LICENSE_END=========================================================\r
+\r
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com\r
+-->\r
+\r
+<base href="/">\r
+\r
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\r
+<link rel="stylesheet" ng-href="./home.component.scss">\r
+<div class="completeForm">\r
+  <div class="searchArea">\r
+\r
+    <!-- Dropdown Filter and TextBox for Service Instance Id -->\r
+    <div class="container-home">\r
+      <mat-form-field class="selectFilter">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSII" name="sel" placeholder="Select Filter">\r
+          <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+      <mat-form-field class="valueInput">\r
+        <input matInput #searchValueSII type="text" [(ngModel)]="searchData.serviceInstanceId" placeholder="Service Instance Id">\r
+      </mat-form-field>\r
+    </div>\r
+\r
+    <!-- Dropdown Filter and TextBox for Request Id -->\r
+    <div class="container-home">\r
+      <mat-form-field class="selectFilter">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueRI" name="sel" placeholder="Select Filter">\r
+          <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+      <mat-form-field class="valueInput">\r
+        <input matInput #searchValueRI type="text" [(ngModel)]="searchData.requestId" placeholder="Request Id">\r
+      </mat-form-field>\r
+\r
+      <!-- Angular Start Date Picker -->\r
+      <mat-form-field class="startDate">\r
+        <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">\r
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\r
+        <mat-datepicker #picker></mat-datepicker>\r
+      </mat-form-field>\r
+\r
+      <!-- Dropdown box for Start Hour selection -->\r
+      <mat-form-field class="selectHour">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">\r
+          <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+\r
+      <!-- Dropdown box for Start Minute selection -->\r
+      <mat-form-field class="selectMinute">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">\r
+          <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+    </div>\r
+\r
+    <!-- Dropdown Filter and TextBox for Service Name -->\r
+    <div class="container-home">\r
+      <mat-form-field class="selectFilter">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSN" name="sel" placeholder="Select Filter">\r
+          <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+      <mat-form-field class="valueInput">\r
+        <input matInput #searchValueSN type="text" [(ngModel)]="searchData.serviceInstanceName" placeholder="Service Name">\r
+      </mat-form-field>\r
+\r
+      <!-- Angular End Date Picker -->\r
+      <mat-form-field class="endDate">\r
+        <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">\r
+        <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>\r
+        <mat-datepicker #endpicker></mat-datepicker>\r
+      </mat-form-field>\r
+\r
+      <!-- Dropdown box for End Hour selection -->\r
+      <mat-form-field class="selectHour">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">\r
+          <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+\r
+      <!-- Dropdown box for End Minute selection -->\r
+      <mat-form-field class="selectMinute">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">\r
+          <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+    </div>\r
+\r
+    <!-- Dropdown Filter for Status -->\r
+    <div class="container-home">\r
+      <mat-form-field class="selectFilter">\r
+        <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSTATUS" name="sel" placeholder="Status">\r
+          <mat-option *ngFor="let statusOption of statusOptions" [value]="statusOption.value">{{ statusOption.name }}</mat-option>\r
+        </mat-select>\r
+      </mat-form-field>\r
+    </div>\r
+    <br />\r
+\r
+    <!-- Button to call makeCall() function to commence search based on parameters -->\r
+    <button (click)="makeCall()" class="fa fa-search"></button>\r
+  </div>\r
+\r
+  <br />\r
+\r
+  <!-- Table to display selected fields if data present -->\r
+  <div class="example-container mat-elevation-z8">\r
+    <mat-tab-group class="tab-group">\r
+      <mat-tab label="Service Instances">\r
+        <mat-table [dataSource]="processData">\r
+          <ng-container matColumnDef="requestId">\r
+            <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessIsntanceId(process.requestId)">{{ process.requestId }}</a></mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="serviceInstanceId">\r
+            <mat-header-cell *matHeaderCellDef> Instance Id </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.serviceInstanceId }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="serviceIstanceName">\r
+            <mat-header-cell *matHeaderCellDef> Instance Name </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="networkId">\r
+            <mat-header-cell *matHeaderCellDef> Network Id </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.networkId }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="requestStatus">\r
+            <mat-header-cell *matHeaderCellDef> Request Status </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.requestStatus }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="serviceType">\r
+            <mat-header-cell *matHeaderCellDef> Service Type </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.serviceType }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="startTime">\r
+            <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.startTime }} </mat-cell>\r
+          </ng-container>\r
+          <ng-container matColumnDef="endTime">\r
+            <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>\r
+            <mat-cell *matCellDef="let process"> {{ process.endTime }} </mat-cell>\r
+          </ng-container>\r
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>\r
+          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>\r
+        </mat-table>\r
+      </mat-tab>\r
+\r
+      <mat-tab label="Service Statistics">\r
+        <div id="servStats">\r
+          <p>Total: {{ totalVal }}</p>\r
+          <hr/>\r
+          <p>Complete: {{ completeVal }}</p>\r
+          <p><b> {{ percentageComplete }}%</b></p>\r
+          <hr/>\r
+          <p>Failed: {{ failedVal }}</p>\r
+          <p><b> {{ percentageFailed }}%</b></p>\r
+          <hr/>\r
+          <p>In Progress: {{ inProgressVal }}</p>\r
+          <hr/>\r
+          <p>Pending: {{ pendingVal }}</p>\r
+          <hr/>\r
+          <p>Unlocked: {{ unlockedVal }}</p>\r
+        </div>\r
+      </mat-tab>\r
+    </mat-tab-group>\r
+  </div>\r
+</div>\r
+\r
+<router-outlet></router-outlet>\r
Service Orchestrator