1 files changed, 69 insertions, 53 deletions
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
index 6adea3b357..2b580e26a1 100644
--- 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
@@ -50,26 +50,26 @@ SPDX-License-Identifier: Apache-2.0
         <input matInput #searchValueRI type="text" [(ngModel)]="searchData.requestId" placeholder="Request Id">
       </mat-form-field>
 
-      <!-- Angular Start Date Picker -->
-      <mat-form-field class="startDate">
-        <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">
-        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-        <mat-datepicker #picker></mat-datepicker>
-      </mat-form-field>
-
-      <!-- Dropdown box for Start Hour selection -->
-      <mat-form-field class="selectHour">
-        <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">
-          <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Dropdown box for Start Minute selection -->
-      <mat-form-field class="selectMinute">
-        <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">
-          <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
-        </mat-select>
-      </mat-form-field>
+        <!-- Angular Start Date Picker -->
+        <mat-form-field class="startDate">
+          <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+
+        <!-- Dropdown box for Start Hour selection -->
+        <mat-form-field class="selectHour">
+          <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">
+            <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <!-- Dropdown box for Start Minute selection -->
+        <mat-form-field class="selectMinute">
+          <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">
+            <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+          </mat-select>
+        </mat-form-field>
     </div>
 
     <!-- Dropdown Filter and TextBox for Service Name -->
@@ -83,26 +83,26 @@ SPDX-License-Identifier: Apache-2.0
         <input matInput #searchValueSN type="text" [(ngModel)]="searchData.serviceInstanceName" placeholder="Service Name">
       </mat-form-field>
 
-      <!-- Angular End Date Picker -->
-      <mat-form-field class="endDate">
-        <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">
-        <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
-        <mat-datepicker #endpicker></mat-datepicker>
-      </mat-form-field>
-
-      <!-- Dropdown box for End Hour selection -->
-      <mat-form-field class="selectHour">
-        <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">
-          <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Dropdown box for End Minute selection -->
-      <mat-form-field class="selectMinute">
-        <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">
-          <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
-        </mat-select>
-      </mat-form-field>
+        <!-- Angular End Date Picker -->
+        <mat-form-field class="endDate">
+          <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">
+          <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
+          <mat-datepicker #endpicker></mat-datepicker>
+        </mat-form-field>
+
+        <!-- Dropdown box for End Hour selection -->
+        <mat-form-field class="selectHour">
+          <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">
+            <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <!-- Dropdown box for End Minute selection -->
+        <mat-form-field class="selectMinute">
+          <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">
+            <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+          </mat-select>
+        </mat-form-field>
     </div>
 
     <!-- Dropdown Filter for Status -->
@@ -165,23 +165,39 @@ SPDX-License-Identifier: Apache-2.0
 
       <mat-tab label="Service Statistics">
         <div id="servStats">
-          <p>Total: {{ totalVal }}</p>
-          <hr/>
-          <p>Complete: {{ completeVal }}</p>
-          <p><b> {{ percentageComplete }}%</b></p>
-          <hr/>
-          <p>Failed: {{ failedVal }}</p>
-          <p><b> {{ percentageFailed }}%</b></p>
-          <hr/>
-          <p>In Progress: {{ inProgressVal }}</p>
-          <hr/>
-          <p>Pending: {{ pendingVal }}</p>
-          <hr/>
-          <p>Unlocked: {{ unlockedVal }}</p>
+          <table class="statsTable">
+            <tbody>
+              <tr>
+                <td>Total: {{ totalVal }}</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Complete: {{ completeVal }}</td>
+                <td> {{ percentageComplete }}%</td>
+              </tr>
+              <tr>
+                <td>Failed: {{ failedVal }}</td>
+                <td> {{ percentageFailed }}%</td>
+              </tr>
+              <tr>
+                <td>In Progress: {{ inProgressVal }}</td>
+                <td> {{ percentageInProg }}%</td>
+              </tr>
+              <tr>
+                <td>Pending: {{ pendingVal }}</td>
+                <td> {{ percentagePending }}%</td>
+              </tr>
+              <tr>
+                <td>Unlocked: {{ unlockedVal }}</td>
+                <td> {{ percentageUnlocked }}%</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </mat-tab>
     </mat-tab-group>
   </div>
 </div>
 
+<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#00285f" type="ball-spin-clockwise-fade-rotating"></ngx-spinner>
 <router-outlet></router-outlet>