feat(ui): improve admin/services (#3389)

engine/api/metrics.go

@@ -30,7 +30,14 @@ func (api *API) getMetricsHandler() service.Handler {
 		header := w.Header()
 		header.Set("Content-Type", string(contentType))
 		header.Set("Content-Length", fmt.Sprint(writer.Len()))
-		w.Write(writer.Bytes())
+
+		contentTypeRequested := r.Header.Get("Content-Type")
+		switch contentTypeRequested {
+		case "application/json":
+			return service.WriteJSON(w, mfs, http.StatusOK)
+		default:
+			w.Write(writer.Bytes()) // nolint
+		}
 		return nil
 	}
 }

engine/api/services.go

@@ -54,6 +54,17 @@ func (api *API) postServiceRegisterHandler() service.Handler {
 		srv.GroupID = &t.GroupID
 		srv.IsSharedInfra = srv.GroupID == &group.SharedInfraGroup.ID
 		srv.Uptodate = srv.Version == sdk.VERSION
+		for i := range srv.MonitoringStatus.Lines {
+			s := &srv.MonitoringStatus.Lines[i]
+			if s.Component == "Version" {
+				if sdk.VERSION != s.Value {
+					s.Status = sdk.MonitoringStatusWarn
+				} else {
+					s.Status = sdk.MonitoringStatusOK
+				}
+				break
+			}
+		}
 
 		//Insert or update the service
 		tx, err := api.mustDB().Begin()

ui/src/app/model/monitoring.model.ts

@@ -12,3 +12,24 @@ export class MonitoringStatusLine {
     component: string;
     value: string;
 }
+
+export interface MonitoringMetricsLabel {
+    name: string;
+    value: string;
+}
+
+export interface MonitoringMetricsGauge {
+    value: number;
+}
+
+export interface MonitoringMetricsMetric {
+    label: MonitoringMetricsLabel[];
+    gauge: MonitoringMetricsGauge;
+}
+
+export interface MonitoringMetricsLine {
+    name: string;
+    help: string;
+    type: number;
+    metric: MonitoringMetricsMetric[];
+}

ui/src/app/service/monitoring/monitoring.service.ts

@@ -1,7 +1,7 @@
-import {HttpClient} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
-import {MonitoringStatus} from '../../model/monitoring.model';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MonitoringMetricsLine, MonitoringStatus } from '../../model/monitoring.model';
 
 /**
  * Service about CDS Monitoring
@@ -19,4 +19,10 @@ export class MonitoringService {
     getStatus(): Observable<MonitoringStatus> {
         return this._http.get<MonitoringStatus>('/mon/status');
     }
+
+    getMetrics(): Observable<MonitoringMetricsLine[]> {
+        let headers = new HttpHeaders();
+        headers = headers.set('Content-Type', 'application/json');
+        return this._http.get<MonitoringMetricsLine[]>('/mon/metrics', {headers});
+    }
 }

ui/src/app/views/admin/services/service/service.html

@@ -29,8 +29,6 @@ <h4>Heartbeat</h4>
     <h4 *ngIf="service.version">Version</h4>
     <p *ngIf="service.version">
         {{service.version}}
-        <span class="ui red tag label" *ngIf="!service.up_to_date">{{'service_binary_not_up_to_date' | translate}}</span>
-        <span class="ui teal tag label" *ngIf="service.up_to_date">{{'service_binary_up_to_date' | translate}}</span>
     </p>
 
     <div class="ui two column grid">

ui/src/app/views/admin/services/services.component.ts

@@ -19,6 +19,7 @@ export class ServicesComponent {
     filteredStatusLines: Array<MonitoringStatusLine>;
 
     globals: Array<Global> = [];
+    globalQueue: Array<Global> = [];
     globalStatus: Global;
     globalVersion: Global;
 
@@ -72,6 +73,58 @@ export class ServicesComponent {
                             });
                             this.loading = false;
                         }
+
+                        this._monitoringService.getMetrics()
+                        .subscribe(metrics => {
+                            metrics.forEach(l => {
+                                if (l.name !== 'queue') {
+                                    return
+                                }
+                                l.metric.forEach(m => {
+                                    m.label.forEach(lb => {
+                                        if (lb.name === 'range') {
+                                            let global = new Global();
+                                            if (lb.value === 'all') {
+                                                return;
+                                            }
+                                            global.name = lb.value;
+                                            switch (lb.value) {
+                                            case '10_less_10s':
+                                                global.name = '< 10s';
+                                                break;
+                                            case '20_more_10s_less_30s':
+                                                global.name = '< 30s';
+                                                break;
+                                            case '30_more_30s_less_1min':
+                                                global.name = '< 1min';
+                                                break;
+                                            case '40_more_1min_less_2min':
+                                                global.name = '< 2min';
+                                                break;
+                                            case '50_more_2min_less_5min':
+                                                global.name = '< 5 min';
+                                                break;
+                                            case '60_more_5min_less_10min':
+                                                global.name = '<10min';
+                                                break;
+                                            case '70_more_10min':
+                                                global.name = '> 10min';
+                                                break;
+                                            default:
+                                                global.name = lb.value;
+                                                break;
+                                            }
+                                            global.value = String(m.gauge.value);
+                                            global.status = 'OK';
+                                            if (lb.value !== '10_less_10s' && m.gauge.value > 0) {
+                                                global.status = 'WARN';
+                                            }
+                                            this.globalQueue.push(global);
+                                        }
+                                    })
+                                });
+                            })
+                        });
                     });
             });
     }

ui/src/app/views/admin/services/services.html

@@ -1,47 +1,88 @@
 <div *ngIf="!loading; then globalsPart;else loadingPart"></div>
 <ng-template #globalsPart>
-
     <div class="paddingContent">
         <div class="viewContent">
+            <div *ngIf="globalQueue && globalQueue.length > 0;then globalQueuelist;else noglobalQueuelist"></div>
+            <ng-template #globalQueuelist>
+                <div class="ui grid">
+                    <div class="wide column">
+                        <h1>
+                            {{'queue_monitoring' | translate}}
+                        </h1>
+                    </div>
+                </div>
+                <div class="ui stackable four cards">
+                    <div class="ui card" *ngFor="let g of globalQueue">
+                        <div class="content">
+                            <div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
+                                {{g.status}}
+                            </div>
+                            <div class="header" [innerText]="g.name"></div>
+                            <div class="extra content" *ngIf="g.value !== '0'">
+                            <a [routerLink]="['/settings', 'queue']">{{g.value}}</a> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+
             <div class="ui grid">
                 <div class="wide column">
                     <h1>
                         {{'services_list' | translate}}
                         <div class="right floated">
-                            <div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'teal': globalStatus.status==='OK'}" (click)="filter=globalStatus.status;filterChange()">
+                            <div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'green': globalStatus.status==='OK'}" (click)="filter=globalStatus.status;filterChange()">
                                 {{globalStatus.name}} {{globalStatus.status}} - {{globalStatus.value}}
                             </div>
 
-                            <div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'teal': globalVersion.status==='OK'}" (click)="filter='/Version';filterChange()">
+                            <div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}" (click)="filter='/Version';filterChange()">
                                 {{globalVersion.name}} {{globalVersion.status}} - {{globalVersion.value}}
                             </div>
                         </div>
                     </h1>
                 </div>
             </div>
+
             <div *ngIf="globals && globals.length > 0;then globalslist;else noglobalslist"></div>
             <ng-template #globalslist>
                 <div class="ui stackable four cards">
                     <div class="ui card" *ngFor="let g of globals">
-                        <div class="content" >
-                            <div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'teal': g.status==='OK'}">
+                        <div class="content pointer" suiPopup [popupText]="'filter_list_click' | translate" (click)="filter=g.name;filterChange()" >
+                            <div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
                                 {{g.status}}
                             </div>
                             <div class="header" [innerText]="g.name"></div>
-                            <div class="meta" *ngIf="g.value">
-                                  {{g.value}}
-                            </div>
                         </div>
                         <div class="extra content">
-                            <div class="mini ui left labeled button" *ngFor="let srv of g.services">
-                                <a class="ui basic label" suiPopup [popupText]="'filter_list_click' | translate" popupPlacement="top left" (click)="filter=srv.name;filterChange()" [ngClass]="{'red': srv.status==='AL', 'orange': srv.status==='WARN', 'teal': srv.status==='OK'}">
-                                    {{srv.name}}
-                                </a>
-                                <div class="mini ui icon button" [routerLink]="[srv.name]" suiPopup [popupText]="'service_view_details' | translate" popupPlacement="top left">
-                                    <i class="eye icon"></i>
+                            <div class="meta" *ngIf="g.value=='0'">
+                                n/a
+                            </div>
+                            <div class="ui middle aligned divided list" *ngFor="let srv of g.services; index as idx; first as isFirst">
+                                <div class="item" *ngIf="isFirst || displayAll">
+                                    <div class="right floated content">
+                                        <i class="filter icon pointer" suiPopup [popupText]="'filter_list_click' | translate" popupPlacement="top left" (click)="filter=srv.name;filterChange()"></i>
+                                    </div>
+                                    <div class="content">
+                                        <a class="ui basic" [routerLink]="[srv.name]" suiPopup [popupText]="'service_view_details' | translate">
+                                            <ng-container [ngSwitch]="srv.status">
+                                                <i class="check green icon" *ngSwitchCase="'OK'" title="{{srv.status}}"></i>
+                                                <i class="remove red icon" *ngSwitchCase="'AL'" title="{{srv.status}}"></i>
+                                                <i class="warning sign icon orange" *ngSwitchCase="'WARN'" title="{{srv.status}}"></i>
+                                            </ng-container>
+                                            {{srv.name}}
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        <div class="ui bottom attached button" *ngIf="g.value>1">
+                            <div class="meta pointer" *ngIf="!displayAll" (click)="displayAll=!displayAll">
+                                {{g.value}} {{'services' | translate}} - {{'services_see_all' | translate}}
+                            </div>
+                            <div class="meta pointer" *ngIf="displayAll" (click)="displayAll=!displayAll">
+                                {{'services_minimize' | translate}}
+                            </div>
+                        </div>
                     </div>
                 </div>
 
@@ -70,7 +111,6 @@ <h1>
                         </tr>
                     </tbody>
                 </table>
-
             </ng-template>
             <ng-template #noglobalslist>
                 <span translate="service_no"></span>

ui/src/app/views/navbar/navbar.html

@@ -191,7 +191,7 @@
             <a sm-item href="#" [routerLink]="['admin', 'broadcast']">{{ 'navbar_admin_broadcast' | translate }}</a>
             <a sm-item href="#" [routerLink]="['admin', 'worker-model-pattern']">{{ 'worker_model_pattern_title' | translate }}</a>
             <a sm-item href="#" [routerLink]="['admin', 'hooks-tasks']">{{ 'hook_tasks_summary' | translate }}</a>
-            <a sm-item href="#" [routerLink]="['admin', 'services']">{{ 'services_list' | translate }}</a>
+            <a sm-item href="#" [routerLink]="['admin', 'services']">{{ 'monitoring' | translate }}</a>
         </sm-dropdown>
     </div>
 </div>

ui/src/assets/i18n/en.json

@@ -411,6 +411,8 @@
   "job_save": "Save job",
   "job_spawn_title": "Information",
 
+  "monitoring": "Monitoring",
+
   "navbar_actions": "Actions",
   "navbar_project_create": "Create a project",
   "navbar_admin_broadcast": "Broadcasts",
@@ -610,6 +612,8 @@
   "provider_hook": "hook",
   "provider_deployment": "deployment",
 
+  "queue_monitoring": "Queue Monitoring",
+
   "repo_name": "Repository",
   "repoman_delete_msg_ok": "Repository mananger is detached from the project",
   "repoman_name": "Repository manager",
@@ -669,11 +673,12 @@
 
   "settings_tips": "Tips",
 
+  "services": "services",
   "services_list": "CDS Services",
+  "services_see_all": "see all",
+  "services_minimize": "Minimize",
   "service_view_details": "Voir les details",
   "service_details": "Service",
-  "service_binary_not_up_to_date": "this service is not up to date, need update",
-  "service_binary_up_to_date": "this service is up to date",
   "service_group": "Group",
   "service_alert": "Status Alert - please check status below",
   "service_warning": "Status Warning - please check status below",

ui/src/assets/i18n/fr.json

@@ -411,6 +411,8 @@
   "job_save": "Sauvegarder le job",
   "job_spawn_title": "Informations",
 
+  "monitoring": "Monitoring",
+
   "navbar_actions": "Actions",
   "navbar_project_create": "Créer un projet",
   "navbar_admin_broadcast": "Informations",
@@ -610,6 +612,8 @@
   "provider_hook": "hook",
   "provider_deployment": "déploiement",
 
+  "queue_monitoring": "Queue Monitoring",
+
   "repo_name": "Nom du dépôt",
   "repoman_delete_msg_ok": "Le gestionnaire de dépôt n'est plus lié au projet",
   "repoman_name": "Gestionnaire de dépôt",
@@ -669,11 +673,12 @@
 
   "settings_tips": "Conseils",
 
+  "services": "services",
   "services_list": "CDS Services",
+  "services_see_all": "Voir tous",
+  "services_minimize": "Minimiser",
   "service_view_details": "Voir les details",
   "service_details": "Service",
-  "service_binary_not_up_to_date": "ce service n'est pas à jour, mettez le à jour",
-  "service_binary_up_to_date": "ce service est à jour",
   "service_group": "Groupe",
   "service_alert": "Status Alert - vérifier le status ci-dessous",
   "service_warning": "Status Warning - vérifier le status ci-dessous",