aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/healthStatus
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/healthStatus
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/healthStatus')
-rw-r--r--vid-webpack-master/src/app/healthStatus/health-status.component.html36
-rw-r--r--vid-webpack-master/src/app/healthStatus/health-status.component.scss187
-rw-r--r--vid-webpack-master/src/app/healthStatus/health-status.component.ts42
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;
+ }
+}