diff options
Diffstat (limited to 'so-monitoring')
11 files changed, 194 insertions, 119 deletions
diff --git a/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/CamundaProcessDataServiceProviderImpl.java b/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/CamundaProcessDataServiceProviderImpl.java index b1815b5350..2515c8f79b 100644 --- a/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/CamundaProcessDataServiceProviderImpl.java +++ b/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/CamundaProcessDataServiceProviderImpl.java @@ -35,21 +35,21 @@ import org.onap.so.montoring.model.ProcessDefinitionDetail; import org.onap.so.montoring.model.ProcessInstanceDetail; import org.onap.so.montoring.model.ProcessInstanceIdDetail; import org.onap.so.montoring.model.ProcessInstanceVariableDetail; -import org.slf4j.ext.XLogger; -import org.slf4j.ext.XLoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Qualifier; import org.springframework.stereotype.Service; import com.google.common.base.Optional; +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; + /** * @author waqas.ikram@ericsson.com */ @Service public class CamundaProcessDataServiceProviderImpl implements CamundaProcessDataServiceProvider { - private static final XLogger LOGGER = XLoggerFactory.getXLogger(CamundaProcessDataServiceProviderImpl.class); - + private static final Logger LOGGER = LoggerFactory.getLogger(CamundaProcessDataServiceProviderImpl.class); private final CamundaRestUrlProvider urlProvider; private final HttpRestServiceProvider httpRestServiceProvider; @@ -69,7 +69,9 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData if (processInstances.isPresent()) { final ProcessInstance[] instances = processInstances.get(); - LOGGER.debug("found process instance for request id: {}, result size: {}", requestId, instances.length); + final String message = "found process instance for request id: " + requestId + + ", result size: " + instances.length; + LOGGER.debug(message); if (instances.length > 0) { for (int index = 0; index < instances.length; index++) { @@ -77,12 +79,12 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData if (processInstance.getSuperProcessInstanceId() == null) { return Optional.of(new ProcessInstanceIdDetail(processInstance.getId())); } - LOGGER.debug("found sub process instance id with super process instanceId: {}", + LOGGER.debug("found sub process instance id with super process instanceId: " + processInstance.getSuperProcessInstanceId()); } } } - LOGGER.error("Unable to find process intance for request id: {}", requestId); + LOGGER.error("Unable to find process intance for request id: " + requestId); return Optional.absent(); } @@ -101,7 +103,7 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData return Optional.of(instanceDetail); } - LOGGER.error("Unable to find process intance for id: {}", processInstanceId); + LOGGER.error("Unable to find process intance for id: " + processInstanceId); return Optional.absent(); } @@ -118,7 +120,8 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData return Optional.of(new ProcessDefinitionDetail(processDefinitionId, xmlDefinition)); } } - LOGGER.error("Unable to find process definition for processDefinitionId: {}", processDefinitionId); + LOGGER.error("Unable to find process definition for processDefinitionId: " + + processDefinitionId); return Optional.absent(); } @@ -145,7 +148,8 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData } return activityInstanceDetails; } - LOGGER.error("Unable to find activity intance detail for process instance id: {}", processInstanceId); + LOGGER.error("Unable to find activity intance detail for process instance id: " + + processInstanceId); return Collections.emptyList(); } @@ -167,7 +171,8 @@ public class CamundaProcessDataServiceProviderImpl implements CamundaProcessData } return instanceVariableDetails; } - LOGGER.error("Unable to find process intance variable details for process instance id: {}", processInstanceId); + LOGGER.error("Unable to find process intance variable details for process instance id: " + + processInstanceId); return Collections.emptyList(); } diff --git a/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/HttpRestServiceProviderImpl.java b/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/HttpRestServiceProviderImpl.java index 35e6038a86..b5cafcf1ed 100644 --- a/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/HttpRestServiceProviderImpl.java +++ b/so-monitoring/so-monitoring-handler/src/main/java/org/onap/so/montoring/rest/service/HttpRestServiceProviderImpl.java @@ -21,8 +21,6 @@ package org.onap.so.montoring.rest.service; import org.onap.so.montoring.exception.InvalidRestRequestException; import org.onap.so.montoring.exception.RestProcessingException; -import org.slf4j.ext.XLogger; -import org.slf4j.ext.XLoggerFactory; import org.springframework.http.HttpEntity; import org.springframework.http.HttpMethod; import org.springframework.http.HttpStatus; @@ -33,13 +31,15 @@ import org.springframework.web.client.RestTemplate; import com.google.common.base.Optional; +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; + /** * @author waqas.ikram@ericsson.com */ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { - private static final XLogger LOGGER = XLoggerFactory.getXLogger(HttpRestServiceProviderImpl.class); - + private static final Logger LOGGER = LoggerFactory.getLogger(HttpRestServiceProviderImpl.class); private final RestTemplate restTemplate; public HttpRestServiceProviderImpl(final RestTemplate restTemplate) { @@ -48,12 +48,13 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { @Override public <T> Optional<T> getHttpResponse(final String url, final Class<T> clazz) { - LOGGER.trace("Will invoke HTTP GET using URL: {}", url); + LOGGER.trace("Will invoke HTTP GET using URL: " + url); try { final ResponseEntity<T> response = restTemplate.exchange(url, HttpMethod.GET, null, clazz); if (!response.getStatusCode().equals(HttpStatus.OK)) { - LOGGER.error("Unable to invoke HTTP GET using URL: {}, Response Code: {}", url, - response.getStatusCode()); + final String message = "Unable to invoke HTTP GET using URL: " + url + + ", Response Code: " + response.getStatusCode(); + LOGGER.error(message); return Optional.absent(); } @@ -61,8 +62,9 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { return Optional.of(response.getBody()); } } catch (final HttpClientErrorException httpClientErrorException) { - LOGGER.error("Unable to invoke HTTP GET using url: {}, Response: {}", url, - httpClientErrorException.getRawStatusCode(), httpClientErrorException); + final String message = "Unable to invoke HTTP GET using url: " + url + ", Response: " + + httpClientErrorException.getRawStatusCode(); + LOGGER.error(message, httpClientErrorException); final int rawStatusCode = httpClientErrorException.getRawStatusCode(); if (rawStatusCode == HttpStatus.BAD_REQUEST.value() || rawStatusCode == HttpStatus.NOT_FOUND.value()) { throw new InvalidRestRequestException("No result found for given url: " + url); @@ -70,8 +72,9 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { throw new RestProcessingException("Unable to invoke HTTP GET using URL: " + url); } catch (final RestClientException restClientException) { - LOGGER.error("Unable to invoke HTTP GET using url: {}", url, restClientException); - throw new RestProcessingException("Unable to invoke HTTP GET using URL: " + url, restClientException); + LOGGER.error("Unable to invoke HTTP GET using url: " + url, restClientException); + throw new RestProcessingException("Unable to invoke HTTP GET using URL: " + + url, restClientException); } return Optional.absent(); @@ -83,8 +86,9 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { final HttpEntity<?> request = new HttpEntity<>(object); final ResponseEntity<T> response = restTemplate.exchange(url, HttpMethod.POST, request, clazz); if (!response.getStatusCode().equals(HttpStatus.OK)) { - LOGGER.error("Unable to invoke HTTP GET using URL: {}, Response Code: {}", url, - response.getStatusCode()); + final String message = "Unable to invoke HTTP GET using URL: " + url + + ", Response Code: " + response.getStatusCode(); + LOGGER.error(message); return Optional.absent(); } @@ -93,8 +97,9 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { } } catch (final HttpClientErrorException httpClientErrorException) { - LOGGER.error("Unable to invoke HTTP POST using url: {}, Response: {}", url, - httpClientErrorException.getRawStatusCode(), httpClientErrorException); + final String message = "Unable to invoke HTTP POST using url: " + url + + ", Response: " + httpClientErrorException.getRawStatusCode(); + LOGGER.error(message, httpClientErrorException); final int rawStatusCode = httpClientErrorException.getRawStatusCode(); if (rawStatusCode == HttpStatus.BAD_REQUEST.value() || rawStatusCode == HttpStatus.NOT_FOUND.value()) { throw new InvalidRestRequestException("No result found for given url: " + url); @@ -102,8 +107,9 @@ public class HttpRestServiceProviderImpl implements HttpRestServiceProvider { throw new RestProcessingException("Unable to invoke HTTP POST using URL: " + url); } catch (final RestClientException restClientException) { - LOGGER.error("Unable to invoke HTTP POST using url: {}", url, restClientException); - throw new RestProcessingException("Unable to invoke HTTP POST using URL: " + url, restClientException); + LOGGER.error("Unable to invoke HTTP POST using url: " + url, restClientException); + throw new RestProcessingException("Unable to invoke HTTP POST using URL: " + + url, restClientException); } return Optional.absent(); diff --git a/so-monitoring/so-monitoring-service/src/main/java/org/onap/so/monitoring/rest/api/SoMonitoringController.java b/so-monitoring/so-monitoring-service/src/main/java/org/onap/so/monitoring/rest/api/SoMonitoringController.java index 913fb3f934..de2263be3f 100644 --- a/so-monitoring/so-monitoring-service/src/main/java/org/onap/so/monitoring/rest/api/SoMonitoringController.java +++ b/so-monitoring/so-monitoring-service/src/main/java/org/onap/so/monitoring/rest/api/SoMonitoringController.java @@ -42,13 +42,14 @@ import org.onap.so.montoring.model.ProcessInstanceIdDetail; import org.onap.so.montoring.model.ProcessInstanceVariableDetail; import org.onap.so.montoring.model.SoInfraRequest; import org.onap.so.montoring.rest.service.CamundaProcessDataServiceProvider; -import org.slf4j.ext.XLogger; -import org.slf4j.ext.XLoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import com.google.common.base.Optional; +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; + /** * @author waqas.ikram@ericsson.com */ @@ -58,7 +59,7 @@ public class SoMonitoringController { private static final String INVALID_PROCESS_INSTANCE_ERROR_MESSAGE = "Invalid process instance id: "; - private static final XLogger LOGGER = XLoggerFactory.getXLogger(SoMonitoringController.class); + private static final Logger LOGGER = LoggerFactory.getLogger(SoMonitoringController.class); private final DatabaseServiceProvider databaseServiceProvider; @@ -85,7 +86,7 @@ public class SoMonitoringController { return Response.status(Status.OK).entity(processInstanceId.get()).build(); } - LOGGER.error("Unable to find process instance id for : {}", requestId); + LOGGER.error("Unable to find process instance id for : " + requestId); return Response.status(Status.NO_CONTENT).build(); } catch (final InvalidRestRequestException extensions) { @@ -114,7 +115,7 @@ public class SoMonitoringController { return Response.status(Status.OK).entity(processInstanceDetail.get()).build(); } - LOGGER.error("Unable to find process instance id for : {}", processInstanceId); + LOGGER.error("Unable to find process instance id for : " + processInstanceId); return Response.status(Status.NO_CONTENT).build(); } catch (final InvalidRestRequestException extensions) { @@ -133,7 +134,8 @@ public class SoMonitoringController { @Produces({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML}) public Response getProcessDefinitionXml(final @PathParam("processDefinitionId") String processDefinitionId) { if (processDefinitionId == null || processDefinitionId.isEmpty()) { - return Response.status(Status.BAD_REQUEST).entity("Invalid process definition id: " + processDefinitionId) + return Response.status(Status.BAD_REQUEST).entity("Invalid process definition id: " + + processDefinitionId) .build(); } try { @@ -143,15 +145,18 @@ public class SoMonitoringController { final ProcessDefinitionDetail definitionDetail = response.get(); return Response.status(Status.OK).entity(definitionDetail).build(); } - LOGGER.error("Unable to find process definition xml for processDefinitionId: {}", processDefinitionId); + LOGGER.error("Unable to find process definition xml for processDefinitionId: " + + processDefinitionId); return Response.status(Status.NO_CONTENT).build(); } catch (final InvalidRestRequestException extensions) { final String message = - "Unable to find process definition xml for processDefinitionId: {}" + processDefinitionId; + "Unable to find process definition xml for processDefinitionId: {}" + + processDefinitionId; return Response.status(Status.BAD_REQUEST).entity(message).build(); } catch (final RestProcessingException restProcessingException) { - final String message = "Unable to get process definition xml for id: " + processDefinitionId; + final String message = "Unable to get process definition xml for id: " + + processDefinitionId; LOGGER.error(message); return Response.status(Status.INTERNAL_SERVER_ERROR).entity(message).build(); } @@ -170,11 +175,13 @@ public class SoMonitoringController { camundaProcessDataServiceProvider.getActivityInstance(processInstanceId); return Response.status(Status.OK).entity(activityInstanceDetails).build(); } catch (final InvalidRestRequestException extensions) { - final String message = "Unable to find activity instance for processInstanceId: " + processInstanceId; + final String message = "Unable to find activity instance for processInstanceId: " + + processInstanceId; LOGGER.error(message); return Response.status(Status.BAD_REQUEST).entity(message).build(); } catch (final RestProcessingException restProcessingException) { - final String message = "Unable to get activity instance detail for id: " + processInstanceId; + final String message = "Unable to get activity instance detail for id: " + + processInstanceId; LOGGER.error(message); return Response.status(Status.INTERNAL_SERVER_ERROR).entity(message).build(); } @@ -194,11 +201,13 @@ public class SoMonitoringController { return Response.status(Status.OK).entity(processInstanceVariable).build(); } catch (final InvalidRestRequestException extensions) { final String message = - "Unable to find process instance variables for processInstanceId: " + processInstanceId; + "Unable to find process instance variables for processInstanceId: " + + processInstanceId; LOGGER.error(message); return Response.status(Status.BAD_REQUEST).entity(message).build(); } catch (final RestProcessingException restProcessingException) { - final String message = "Unable to get process instance variables for id: " + processInstanceId; + final String message = "Unable to get process instance variables for id: " + + processInstanceId; LOGGER.error(message); return Response.status(Status.INTERNAL_SERVER_ERROR).entity(message).build(); } @@ -217,17 +226,17 @@ public class SoMonitoringController { try { final List<SoInfraRequest> requests = databaseServiceProvider.getSoInfraRequest(filters, startTime, endTime, maxResult); - LOGGER.info("result size: {}", requests.size()); + LOGGER.info("result size: " + requests.size()); return Response.status(Status.OK).entity(requests).build(); } catch (final InvalidRestRequestException extensions) { - final String message = "Unable to search request for filters: " + filters + ", from: " + startTime - + ", to: " + endTime + ", maxResult: " + maxResult; + final String message = "Unable to search request for filters: " + filters + ", from: " + + startTime + ", to: " + endTime + ", maxResult: " + maxResult; LOGGER.error(message); return Response.status(Status.BAD_REQUEST).entity(message).build(); } catch (final RestProcessingException restProcessingException) { - final String message = "Unable to search request for filters: " + filters + ", from: " + startTime - + ", to: " + endTime + ", maxResult: " + maxResult; + final String message = "Unable to search request for filters: " + filters + ", from: " + + startTime + ", to: " + endTime + ", maxResult: " + maxResult; LOGGER.error(message); return Response.status(Status.INTERNAL_SERVER_ERROR).entity(message).build(); } diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json index d9ec649f2e..78642155b4 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json @@ -6717,6 +6717,14 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ngx-spinner": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-6.1.2.tgz", + "integrity": "sha512-j/R8T5vKvsLLib1pTxKLYK3GYAFXw5VoUJmaTlcocO6Yi4qIypfhmw9PX9triy7hWVGPu6cUzVs7g9cEG9OYBA==", + "requires": { + "tslib": "^1.9.0" + } + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/package.json b/so-monitoring/so-monitoring-ui/src/main/frontend/package.json index c6f6f14dea..c793264e99 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/package.json +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/package.json @@ -26,6 +26,7 @@ "bpmn-js": "^2.4.1", "core-js": "^2.5.4", "jquery": "^3.3.1", + "ngx-spinner": "^6.1.2", "rxjs": "^6.0.0", "toastr": "^2.1.4", "zone.js": "^0.8.26" diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts index c3a02b90f3..b9437ccb75 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts @@ -40,6 +40,7 @@ import { MatFormFieldModule, MatInputModule } from '@angular/material'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material';
import { MatCardModule } from '@angular/material/card';
+import { NgxSpinnerModule } from 'ngx-spinner';
@NgModule({
declarations: [
@@ -62,7 +63,8 @@ import { MatCardModule } from '@angular/material/card'; MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
- MatCardModule
+ MatCardModule,
+ NgxSpinnerModule
],
providers: [ToastrNotificationService],
bootstrap: [AppComponent]
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html index fc682acb61..45301c7945 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html @@ -97,3 +97,5 @@ SPDX-License-Identifier: Apache-2.0 </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>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts index 9561e9abf7..4c19ba1039 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts @@ -33,6 +33,7 @@ import { ViewEncapsulation } from '@angular/core'; import { MatTabsModule } from '@angular/material/tabs';
import { VarInstance } from '../model/variableInstance.model';
import { ToastrNotificationService } from '../toastr-notification-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
@Component({
selector: 'app-details',
@@ -63,7 +64,8 @@ export class DetailsComponent implements OnInit { displayedColumnsVariable = ['name', 'type', 'value'];
- constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, private router: Router) { }
+ constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService,
+ private router: Router, private spinner: NgxSpinnerService) { }
getActInst(procInstId: string) {
this.data.getActivityInstance(procInstId).subscribe(
@@ -104,12 +106,15 @@ export class DetailsComponent implements OnInit { }
displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) {
+ this.spinner.show();
this.bpmnViewer.importXML(bpmnXml, (error) => {
if (error) {
console.error('Unable to load BPMN flow ', error);
this.popup.error('Unable to load BPMN flow ');
+ this.spinner.hide();
} else {
+ this.spinner.hide();
let canvas = this.bpmnViewer.get('canvas');
var eventBus = this.bpmnViewer.get('eventBus');
eventBus.on('element.click', function(e) {
@@ -118,6 +123,7 @@ export class DetailsComponent implements OnInit { if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {
console.log("will drill down to : " + a.calledProcessInstanceId);
r.navigate(['/details/' + a.calledProcessInstanceId]);
+ this.spinner.show();
}
});
});
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>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss index d475c52cb8..923066face 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss @@ -19,7 +19,6 @@ SPDX-License-Identifier: Apache-2.0 @authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
*/
-
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.searchArea {
@@ -77,7 +76,7 @@ SPDX-License-Identifier: Apache-2.0 }
.fa {
- float: left;
+ float: left;
width: 120px;
padding: 10px;
background: #2196F3;
@@ -103,28 +102,29 @@ form.example::after { display: inline-flex;
}
-.startDate, .endDate{
+.endDate,
+.startDate {
margin-left: 90px;
width: 140px;
}
-.selectHour, .selectMinute{
+.selectHour,
+.selectMinute {
margin-left: 30px;
- width: 100px
+ width: 100px;
}
-#servStats{
+#servStats {
background-color: white;
padding: 10px;
font-size: 17px;
font-family: 'Montserrat', sans-serif;
}
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
+.statsTable {
+ td {
+ padding: 12px 80px 12px 12px;
+ text-align: left;
+ border-bottom: 1px solid #ccc;
+ }
}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts index dd08bb4ae5..b8fac61adf 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts @@ -35,9 +35,9 @@ import { SearchData } from '../model/searchData.model'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { FormControl } from '@angular/forms'; import { SearchRequest } from '../model/SearchRequest.model'; -import { ViewChild } from '@angular/core'; import { ElementRef } from '@angular/core'; import { Input } from '@angular/core'; +import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-home', @@ -56,6 +56,9 @@ export class HomeComponent implements OnInit { unlockedVal = 0; percentageComplete = 0; percentageFailed = 0; + percentageInProg = 0; + percentagePending = 0; + percentageUnlocked = 0; options = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }]; statusOptions = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" }, @@ -77,17 +80,22 @@ export class HomeComponent implements OnInit { displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime']; constructor(private route: ActivatedRoute, private data: DataService, - private router: Router, private popup: ToastrNotificationService) { + private router: Router, private popup: ToastrNotificationService, + private spinner: NgxSpinnerService) { this.searchData = new SearchData(); } makeCall() { + this.spinner.show(); + var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => { this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds()) .subscribe((data: Process[]) => { + this.spinner.hide(); this.processData = data; - this.popup.info("Number of records found: " + data.length); + this.popup.info("Number of records found: " + data.length) + // Calculate Statistics for Service Statistics tab this.completeVal = this.processData.filter(i => i.requestStatus === "COMPLETE").length; this.inProgressVal = this.processData.filter(i => i.requestStatus === "IN_PROGRESS").length; @@ -95,28 +103,40 @@ export class HomeComponent implements OnInit { this.pendingVal = this.processData.filter(i => i.requestStatus === "PENDING").length; this.unlockedVal = this.processData.filter(i => i.requestStatus === "UNLOCKED").length; this.totalVal = this.processData.length; - this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100; - this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100; + // Calculate percentages to 2 decimal places and compare to 0 to avoid NaN error + if (this.totalVal != 0) { + this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100; + this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100; + this.percentageInProg = Math.round(((this.inProgressVal / this.totalVal) * 100) * 100) / 100; + this.percentagePending = Math.round(((this.pendingVal / this.totalVal) * 100) * 100) / 100; + this.percentageUnlocked = Math.round(((this.unlockedVal / this.totalVal) * 100) * 100) / 100; + } console.log("COMPLETE: " + this.completeVal); console.log("FAILED: " + this.failedVal); }, error => { console.log(error); this.popup.error("Unable to perform search Error code:" + error.status); + this.spinner.hide(); }); }, error => { console.log("Data validation error " + error); this.popup.error(error); + this.spinner.hide(); }); } getProcessIsntanceId(requestId: string) { + this.spinner.show(); + var response = this.data.getProcessInstanceId(requestId).subscribe((data) => { if (data.status == 200) { + this.spinner.hide(); var processInstanceId = (data.body as ProcessInstanceId).processInstanceId; this.router.navigate(['/details/' + processInstanceId]); } else { this.popup.error('No process instance id found: ' + requestId); + this.spinner.hide(); console.log('No process instance id found: ' + requestId); } }); |