diff options
Diffstat (limited to 'vid-webpack-master/src/app/healthStatus')
3 files changed, 265 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/healthStatus/health-status.component.html b/vid-webpack-master/src/app/healthStatus/health-status.component.html new file mode 100644 index 000000000..600c873be --- /dev/null +++ b/vid-webpack-master/src/app/healthStatus/health-status.component.html @@ -0,0 +1,36 @@ +<div class="row"> + <div class="health-status-header"> + <div> + <div class="row" style="margin-left: 0;"> + <div> + <span class="title">Health Status </span> + </div> + <div class="lastUpdate"> + <div style="float: left;margin-top: 3px;"><span>Last update: {{lastUpdatedDate | date:'MMM. dd, yyyy | HH:mm'}}</span> + </div> + <div class="refresh-btn" [ngClass]="{'spin' : !dataIsReady}" (click)="refreshData()"> + <span class="icon-refresh"></span> + </div> + </div> + </div> + </div> + </div> +</div> +<div class="row"> + <table id="health-status-table" class="table table-bordered"> + <tbody> + <tr class="row spaceUnder" *ngFor="let componentStatus of componentStatuses" [attr.data-tests-id]="'component-'+componentStatus?.component"> + <td class="col-md-1 col-xs-1 component-name" + [attr.data-tests-id]="'component-name-'+componentStatus?.component" + [ngClass]="isAvailable(componentStatus) ? 'border-is-ok': 'border-not-ok'"> + {{componentStatus?.component}} + </td> + <td class="col-md-11 col-xs-3 component-metadata-cell" + [attr.data-tests-id]="'component-metadata-'+componentStatus?.component" + [ngClass]="isAvailable(componentStatus) ? 'border-is-ok': 'border-not-ok'"> + <pre class="component-metadata">{{getMetadata(componentStatus) | json}}</pre> + </td> + </tr> + </tbody> + </table> +</div> diff --git a/vid-webpack-master/src/app/healthStatus/health-status.component.scss b/vid-webpack-master/src/app/healthStatus/health-status.component.scss new file mode 100644 index 000000000..0dda6b215 --- /dev/null +++ b/vid-webpack-master/src/app/healthStatus/health-status.component.scss @@ -0,0 +1,187 @@ +div.dataTables_wrapper { + width: 800px; + margin: 0 auto; +} + +.row { + margin-left: 15px; + margin-right: 15px; +} + +.health-status-header { + margin-top: 30px; + .title { + font-family: OpenSans-Semibold; + font-size: 24px; + color: #4A4A4A; + float: left; + } + + .info { + width: 18px; + height: 18px; + border: 0; + background-size: auto 100%; + cursor: pointer; + float: left; + margin: 10px; + } + + .refresh-btn { + float: left; + margin-top: 6px; + margin-left: 10px; + cursor: pointer; + } + + .lastUpdate { + margin-top: 5px; + padding-top: 0px; + font-size: 15px; + border-left: 1px solid black; + float: left; + padding-left: 10px; + color: gray; + height: 26px; + margin-left: 10px; + } + + .refreshBtn { + width: 18px; + height: 18px; + border: 0; + background-size: auto 100%; + outline: none; + margin-left: 10px; + background: transparent; + } + + svg-icon use { + fill: #0000ff !important; + } + + //.sub-title { + // font-family: OpenSans-Semibold; + // font-size: 14px; + // color: #4A4A4A; + // margin-left: 0; + //} +} + +.loader { + border: 5px solid #f3f3f3; + border-radius: 50%; + border-top: 5px solid #3498db; + width: 170px; + height: 170px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + position: absolute; + left: 50%; + right: 50%; + top: 50%; +} + +/* Safari */ +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + + +.spin { + -webkit-animation: spin .4s infinite linear; + -moz-animation: spin .4s infinite linear; + -o-animation: spin .4s infinite linear; + animation: spin .4s infinite linear; + -webkit-transform-origin: 50% 44%; + transform-origin:50% 44%; + -ms-transform-origin:50% 44% /* IE 9 */ +} + +@-moz-keyframes spin { + from { + -moz-transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.icon-refresh:before { + font-family: icomoon; + content: '\e936'; +} + +.row{ + max-width: 1500px; +} + +.red { + color: red; +} + +.border-not-ok { + border : 2px solid red; +} + +.border-is-ok { + border : 2px solid #2fcc66; +} + + +.component-name { + min-width: 100px; + vertical-align: middle; + text-align: center; + background: #f5f5f5; + border-right: unset; +} + +.component-metadata-cell { + border-left: unset; +} + +.component-metadata { + white-space: pre-wrap; + background-color: unset; + border: unset; + font-family: OpenSans-Semibold; + font-size: 12px; +} + + +.table-bordered { + margin-top: 10px; + font-family: OpenSans-Semibold; + font-size: 12px; + overflow-x: auto; + display: block; + color: #5A5A5A; + border: none; + border-spacing: 0px 3px; + border-collapse: separate; +} diff --git a/vid-webpack-master/src/app/healthStatus/health-status.component.ts b/vid-webpack-master/src/app/healthStatus/health-status.component.ts new file mode 100644 index 000000000..6a9ddfdd7 --- /dev/null +++ b/vid-webpack-master/src/app/healthStatus/health-status.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; +import {ExternalComponentStatus} from "../shared/models/externalComponentStatus"; +import {HealthStatusService} from "../shared/server/healthStatusService/health-status.service"; + +@Component({ + selector: 'app-health-status', + templateUrl: './health-status.component.html', + styleUrls: ['./health-status.component.scss'] +}) +export class HealthStatusComponent implements OnInit { + private componentStatuses: Array<ExternalComponentStatus> = []; + private dataIsReady: boolean; + private lastUpdatedDate: Date; + + constructor(private _healthStatusService: HealthStatusService) { + } + + + ngOnInit() { + this.refreshData(); + } + + refreshData(): void { + this.dataIsReady = false; + this._healthStatusService.getProbe() + .subscribe((res: Array<ExternalComponentStatus>) => { + this.componentStatuses = res; + this.dataIsReady = true; + this.lastUpdatedDate = new Date(); + }) + } + + getMetadata(status : ExternalComponentStatus):string { + let metadata = status.metadata; + delete metadata.rawData; + return metadata; + } + + isAvailable(componentStatus: ExternalComponentStatus) { + return componentStatus.available; + } +} |