8000 feat(ui): improve admin/services (#3389) · ovh/cds@1dfa065 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 1dfa065

Browse files
authored
feat(ui): improve admin/services (#3389)
1 parent a549ff6 commit 1dfa065

File tree

10 files changed

+173
-27
lines changed

10 files changed

+173
-27
lines changed

engine/api/metrics.go

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@ func (api *API) getMetricsHandler() service.Handler {
3030
header := w.Header()
3131
header.Set("Content-Type", string(contentType))
3232
header.Set("Content-Length", fmt.Sprint(writer.Len()))
33-
w.Write(writer.Bytes())
33+
34+
contentTypeRequested := r.Header.Get("Content-Type")
35+
switch contentTypeRequested {
36+
case "application/json":
37+
return service.WriteJSON(w, mfs, http.StatusOK)
38+
default:
39+
w.Write(writer.Bytes()) // nolint
40+
}
3441
return nil
3542
}
3643
}

engine/api/services.go

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,17 @@ func (api *API) postServiceRegisterHandler() service.Handler {
5454
srv.GroupID = &t.GroupID
5555
srv.IsSharedInfra = srv.GroupID == &group.SharedInfraGroup.ID
5656
srv.Uptodate = srv.Version == sdk.VERSION
57+
for i := range srv.MonitoringStatus.Lines {
58+
s := &srv.MonitoringStatus.Lines[i]
59+
if s.Component == "Version" {
60+
if sdk.VERSION != s.Value {
61+
s.Status = sdk.MonitoringStatusWarn
62+
} else {
63+
s.Status = sdk.MonitoringStatusOK
64+
}
65+
break
66+
}
67+
}
5768

5869
//Insert or update the service
5970
tx, err := api.mustDB().Begin()

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,24 @@ export class MonitoringStatusLine {
1212
component: string;
1313
value: string;
1414
}
15+
16+
export interface MonitoringMetricsLabel {
17+
name: string;
18+
value: string;
19+
}
20+
21+
export interface MonitoringMetricsGauge {
22+
value: number;
23+
}
24+
25+
export interface MonitoringMetricsMetric {
26+
label: MonitoringMetricsLabel[];
27+
gauge: MonitoringMetricsGauge;
28+
}
29+
30+
export interface MonitoringMetricsLine {
31+
name: string;
32+
help: string;
33+
type: number;
34+
metric: MonitoringMetricsMetric[];
35+
}

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {HttpClient} from '@angular/common/http';
2-
import {Injectable} from '@angular/core';
3-
import {Observable} from 'rxjs';
4-
import {MonitoringStatus} from '../../model/monitoring.model';
1+
import { HttpClient, HttpHeaders } from '@angular/common/http';
2+
import { Injectable } from '@angular/core';
3+
import { Observable } from 'rxjs';
4+
import { MonitoringMetricsLine, MonitoringStatus } from '../../model/monitoring.model';
55

66
/**
77
* Service about CDS Monitoring
@@ -19,4 +19,10 @@ export class MonitoringService {
1919
getStatus(): Observable<MonitoringStatus> {
2020
return this._http.get<MonitoringStatus>('/mon/status');
2121
}
22+
23+
getMetrics(): Observable<MonitoringMetricsLine[]> {
24+
let headers = new HttpHeaders();
25+
headers = headers.set('Content-Type', 'application/json');
26+
return this._http.get<MonitoringMetricsLine[]>('/mon/metrics', {headers});
27+
}
2228
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ <h4>Heartbeat</h4>
2929
<h4 *ngIf="service.version">Version</h4>
3030
<p *ngIf="service.version">
3131
{{service.version}}
32-
<span class="ui red tag label" *ngIf="!service.up_to_date">{{'service_binary_not_up_to_date' | translate}}</span>
33-
<span class="ui teal tag label" *ngIf="service.up_to_date">{{'service_binary_up_to_date' | translate}}</span>
3432
</p>
3533

3634
<div class="ui two column grid">

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export class ServicesComponent {
1919
filteredStatusLines: Array<MonitoringStatusLine>;
2020

2121
globals: Array<Global> = [];
22+
globalQueue: Array<Global> = [];
2223
globalStatus: Global;
2324
globalVersion: Global;
2425

@@ -72,6 +73,58 @@ export class ServicesComponent {
7273
});
7374
this.loading = false;
7475
}
76+
77+
this._monitoringService.getMetrics()
78+
.subscribe(metrics => {
79+
metrics.forEach(l => {
80+
if (l.name !== 'queue') {
81+
return
82+
}
83+
l.metric.forEach(m => {
84+
m.label.forEach(lb => {
85+
if (lb.name === 'range') {
86+
let global = new Global();
87+
if (lb.value === 'all') {
88+
return;
89+
}
90+
global.name = lb.value;
91+
switch (lb.value) {
92+
case '10_less_10s':
93+
global.name = '< 10s';
94+
break;
95+
case '20_more_10s_less_30s':
96+
global.name = '< 30s';
97+
break;
98+
case '30_more_30s_less_1min':
99+
global.name = '< 1min';
100+
break;
101+
case '40_more_1min_less_2min':
102+
global.name = '< 2min';
103+
break;
104+
case '50_more_2min_less_5min':
105+
global.name = '< 5 min';
106+
break;
107+
case '60_more_5min_less_10min':
108+
global.name = '<10min';
109+
break;
110+
case '70_more_10min':
111+
global.name = '> 10min';
112+
break;
113+
default:
114+
global.name = lb.value;
115+
break;
116+
}
117+
global.value = String(m.gauge.value);
118+
global.status = 'OK';
119+
if (lb.value !== '10_less_10s' && m.gauge.value > 0) {
120+
global.status = 'WARN';
121+
}
122+
this.globalQueue.push(global);
123+
}
124+
})
125+
});
126+
})
127+
});
75128
});
76129
});
77130
}

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

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,88 @@
11
<div *ngIf="!loading; then globalsPart;else loadingPart"></div>
22
<ng-template #globalsPart>
3-
43
<div class="paddingContent">
54
<div class="viewContent">
5+
<div *ngIf="globalQueue && globalQueue.length > 0;then globalQueuelist;else noglobalQueuelist"></div>
6+
<ng-template #globalQueuelist>
7+
<div class="ui grid">
8+
<div class="wide column">
9+
<h1>
10+
{{'queue_monitoring' | translate}}
11+
</h1>
12+
</div>
13+
</div>
14+
<div class="ui stackable four cards">
15+
<div class="ui card" *ngFor="let g of globalQueue">
16+
<div class="content">
17+
<div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
18+
{{g.status}}
19+
</div>
20+
<div class="header" [innerText]="g.name"></div>
21+
<div class="extra content" *ngIf="g.value !== '0'">
22+
<a [routerLink]="['/settings', 'queue']">{{g.value}}</a>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</ng-template>
28+
629
<div class="ui grid">
730
<div class="wide column">
831
<h1>
932
{{'services_list' | translate}}
1033
<div class="right floated">
11-
<div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'teal': globalStatus.status==='OK'}" (click)="filter=globalStatus.status;filterChange()">
34+
<div class="ui pointer label" [ngClass]="{'red': globalStatus.status==='AL', 'orange': globalStatus.status==='WARN', 'green': globalStatus.status==='OK'}" (click)="filter=globalStatus.status;filterChange()">
1235
{{globalStatus.name}} {{globalStatus.status}} - {{globalStatus.value}}
1336
</div>
1437

15-
<div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'teal': globalVersion.status==='OK'}" (click)="filter='/Version';filterChange()">
38+
<div class="ui pointer label" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}" (click)="filter='/Version';filterChange()">
1639
{{globalVersion.name}} {{globalVersion.status}} - {{globalVersion.value}}
1740
</div>
1841
</div>
1942
</h1>
2043
</div>
2144
</div>
45+
2246
<div *ngIf="globals && globals.length > 0;then globalslist;else noglobalslist"></div>
2347
<ng-template #globalslist>
2448
<div class="ui stackable four cards">
2549
<div class="ui card" *ngFor="let g of globals">
26-
<div class="content" >
27-
<div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'teal': g.status==='OK'}">
50+
<div class="content pointer" suiPopup [popupText]="'filter_list_click' | translate" (click)="filter=g.name;filterChange()" >
51+
<div class="ui horizontal label right floated" [ngClass]="{'red': g.status==='AL', 'orange': g.status==='WARN', 'green': g.status==='OK'}">
2852
{{g.status}}
2953
</div>
3054
<div class="header" [innerText]="g.name"></div>
31-
<div class="meta" *ngIf="g.value">
32-
{{g.value}}
33-
</div>
3455
</div>
3556
<div class="extra content">
36-
<div class="mini ui left labeled button" *ngFor="let srv of g.services">
37-
<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'}">
38-
{{srv.name}}
39-
</a>
40-
<div class="mini ui icon button" [routerLink]="[srv.name]" suiPopup [popupText]="'service_view_details' | translate" popupPlacement="top left">
41-
<i class="eye icon"></i>
57+
<div class="meta" *ngIf="g.value=='0'">
58+
n/a
59+
</div>
60+
<div class="ui middle aligned divided list" *ngFor="let srv of g.services; index as idx; first as isFirst">
61+
<div class="item" *ngIf="isFirst || displayAll">
62+
<div class="right floated content">
63+
<i class="filter icon pointer" suiPopup [popupText]="'filter_list_click' | translate" popupPlacement="top left" (click)="filter=srv.name;filterChange()"></i>
64+
</div>
< 10000 code>65+
<div class="content">
66+
<a class="ui basic" [routerLink]="[srv.name]" suiPopup [popupText]="'service_view_details' | translate">
67+
<ng-container [ngSwitch]="srv.status">
68+
<i class="check green icon" *ngSwitchCase="'OK'" title="{{srv.status}}"></i>
69+
<i class="remove red icon" *ngSwitchCase="'AL'" title="{{srv.status}}"></i>
70+
<i class="warning sign icon orange" *ngSwitchCase="'WARN'" title="{{srv.status}}"></i>
71+
</ng-container>
72+
{{srv.name}}
73+
</a>
74+
</div>
4275
</div>
4376
</div>
4477
</div>
78+
<div class="ui bottom attached button" *ngIf="g.value>1">
79+
<div class="meta pointer" *ngIf="!displayAll" (click)="displayAll=!displayAll">
80+
{{g.value}} {{'services' | translate}} - {{'services_see_all' | translate}}
81+
</div>
82+
<div class="meta pointer" *ngIf="displayAll" (click)="displayAll=!displayAll">
83+
{{'services_minimize' | translate}}
84+
</div>
85+
</div>
4586
</div>
4687
</div>
4788

@@ -70,7 +111,6 @@ <h1>
70111
</tr>
71112
</tbody>
72113
</table>
73-
74114
</ng-template>
75115
<ng-template #noglobalslist>
76116
<span translate="service_no"></span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
<a sm-item href="#" [routerLink]="['admin', 'broadcast']">{{ 'navbar_admin_broadcast' | translate }}</a>
192192
<a sm-item href="#" [routerLink]="['admin', 'worker-model-pattern']">{{ 'worker_model_pattern_title' | translate }}</a>
193193
<a sm-item href="#" [routerLink]="['admin', 'hooks-tasks']">{{ 'hook_tasks_summary' | translate }}</a>
194-
<a sm-item href="#" [routerLink]="['admin', 'services']">{{ 'services_list' | translate }}</a>
194+
<a sm-item href="#" [routerLink]="['admin', 'services']">{{ 'monitoring' | translate }}</a>
195195
</sm-dropdown>
196196
</div>
197197
</div>

ui/src/assets/i18n/en.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,8 @@
411411
"job_save": "Save job",
412412
"job_spawn_title": "Information",
413413

414+
"monitoring": "Monitoring",
415+
414416
"navbar_actions": "Actions",
415417
"navbar_project_create": "Create a project",
416418
"navbar_admin_broadcast": "Broadcasts",
@@ -610,6 +612,8 @@
610612
"provider_hook": "hook",
611613
"provider_deployment": "deployment",
612614

615+
"queue_monitoring": "Queue Monitoring",
616+
613617
"repo_name": "Repository",
614618
"repoman_delete_msg_ok": "Repository mananger is detached from the project",
615619
"repoman_name": "Repository manager",
@@ -669,11 +673,12 @@
669673

670674
"settings_tips": "Tips",
671675

676+
"services": "services",
672677
"services_list": "CDS Services",
678+
"services_see_all": "see all",
679+
"services_minimize": "Minimize",
673680
"service_view_details": "Voir les details",
674681
"service_details": "Service",
675-
"service_binary_not_up_to_date": "this service is not up to date, need update",
676-
"service_binary_up_to_date": "this service is up to date",
677682
"service_group": "Group",
678683
"service_alert": "Status Alert - please check status below",
679684
"service_warning": "Status Warning - please check status below",

ui/src/assets/i18n/fr.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,8 @@
411411
"job_save": "Sauvegarder le job",
412412
"job_spawn_title": "Informations",
413413

414+
"monitoring": "Monitoring",
415+
414416
"navbar_actions": "Actions",
415417
"navbar_project_create": "Créer un projet",
416418
"navbar_admin_broadcast": "Informations",
@@ -610,6 +612,8 @@
610612
"provider_hook": "hook",
611613
"provider_deployment": "déploiement",
612614

615+
"queue_monitoring": "Queue Monitoring",
616+
613617
"repo_name": "Nom du dépôt",
614618
"repoman_delete_msg_ok": "Le gestionnaire de dépôt n'est plus lié au projet",
615619
"repoman_name": "Gestionnaire de dépôt",
@@ -669,11 +673,12 @@
669673

670674
"settings_tips": "Conseils",
671675

676+
"services": "services",
672677
"services_list": "CDS Services",
678+
"services_see_all": "Voir tous",
679+
"services_minimize": "Minimiser",
673680
"service_view_details": "Voir les details",
674681
"service_details": "Service",
675-
"service_binary_not_up_to_date": "ce service n'est pas à jour, mettez le à jour",
676-
"service_binary_up_to_date": "ce service est à jour",
677682
"service_group": "Groupe",
678683
"service_alert": "Status Alert - vérifier le status ci-dessous",
679684
"service_warning": "Status Warning - vérifier le status ci-dessous",

0 commit comments

Comments
 (0)
0