Igor Kulikov
4 years ago
13 changed files with 954 additions and 281 deletions
@ -0,0 +1,77 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<table mat-table [dataSource]="dataSource" matSort [matSortActive]="pageLink.sortOrder?.property" |
||||
|
[matSortDirection]="pageLink.sortDirection()" matSortDisableClear> |
||||
|
<ng-container matColumnDef="serviceId"> |
||||
|
<mat-header-cell *matHeaderCellDef style="width: 35%;" mat-sort-header> |
||||
|
Service id |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let serviceData"> |
||||
|
{{ serviceData.serviceId }} |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="serviceType"> |
||||
|
<mat-header-cell *matHeaderCellDef style="width: 35%;" mat-sort-header> |
||||
|
Service type |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let serviceData"> |
||||
|
{{ serviceData.serviceType }} |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="cpuUsage"> |
||||
|
<mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header> |
||||
|
CPU |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let serviceData" |
||||
|
[matTooltip]="infoTooltip(serviceData, 'cpu')" |
||||
|
matTooltipPosition="above" |
||||
|
class="tb-resource-usage" |
||||
|
[ngClass]="statusClass(serviceData.cpuUsage)"> |
||||
|
{{ serviceData.cpuUsage }}% |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="memoryUsage"> |
||||
|
<mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header> |
||||
|
RAM |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let serviceData" |
||||
|
[matTooltip]="infoTooltip(serviceData, 'ram')" |
||||
|
matTooltipPosition="above" |
||||
|
class="tb-resource-usage" |
||||
|
[ngClass]="statusClass(serviceData.memoryUsage)"> |
||||
|
{{ serviceData.memoryUsage }}% |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="discUsage"> |
||||
|
<mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header> |
||||
|
Disk |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let serviceData" |
||||
|
[matTooltip]="infoTooltip(serviceData, 'disc')" |
||||
|
matTooltipPosition="above" |
||||
|
class="tb-resource-usage" |
||||
|
[ngClass]="statusClass(serviceData.discUsage)"> |
||||
|
{{ serviceData.discUsage }}% |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
||||
|
<mat-row *matRowDef="let serviceData; columns: displayedColumns;"></mat-row> |
||||
|
</table> |
||||
|
<span [fxShow]="dataSource.isEmpty() | async" |
||||
|
fxLayoutAlign="center center" |
||||
|
class="no-data-found">No data</span> |
||||
@ -0,0 +1,71 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
span.no-data-found { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
} |
||||
|
|
||||
|
.tb-resource-usage { |
||||
|
cursor: default; |
||||
|
&.tb-status-warn, &.tb-status-critical { |
||||
|
position: relative; |
||||
|
overflow: visible; |
||||
|
&:before { |
||||
|
position: absolute; |
||||
|
top: 15px; |
||||
|
left: -24px; |
||||
|
font-family: 'Material Icons Round'; |
||||
|
font-size: 20px; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
} |
||||
|
&.tb-status-warn { |
||||
|
color: #FAA405; |
||||
|
&:before { |
||||
|
content: "warning"; |
||||
|
color: #FAA405; |
||||
|
} |
||||
|
} |
||||
|
&.tb-status-critical { |
||||
|
color: #D12730; |
||||
|
&:before { |
||||
|
content: "warning"; |
||||
|
color: #D12730; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.mdc-data-table__header-cell { |
||||
|
font-weight: 500; |
||||
|
font-size: 11px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
.mdc-data-table__cell { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,236 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, ChangeDetectionStrategy, Component, NgZone, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { CollectionViewer, DataSource } from '@angular/cdk/collections'; |
||||
|
import { BehaviorSubject, Observable, of } from 'rxjs'; |
||||
|
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
||||
|
import { MAX_SAFE_PAGE_SIZE, PageLink } from '@shared/models/page/page-link'; |
||||
|
import { catchError, map, publishReplay, refCount, share } from 'rxjs/operators'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
||||
|
import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service'; |
||||
|
import { EntityDataUpdate, TelemetrySubscriber } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AliasFilterType } from '@shared/models/alias.models'; |
||||
|
import { EntityKeyType } from '@shared/models/query/query.models'; |
||||
|
|
||||
|
export interface SystemInfoData { |
||||
|
serviceId: string; |
||||
|
serviceType: string; |
||||
|
cpuUsage: number; |
||||
|
cpuCount: number; |
||||
|
memoryUsage: number; |
||||
|
totalMemory: number; |
||||
|
discUsage: number; |
||||
|
totalDiscSpace: number; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-cluster-info-table', |
||||
|
templateUrl: './cluster-info-table.component.html', |
||||
|
styleUrls: ['./cluster-info-table.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ClusterInfoTableComponent extends PageComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
@ViewChild(MatSort) sort: MatSort; |
||||
|
|
||||
|
displayedColumns = ['serviceId', 'serviceType', 'cpuUsage', 'memoryUsage', 'discUsage']; |
||||
|
|
||||
|
dataSource: SystemInfoDataSource; |
||||
|
|
||||
|
pageLink: PageLink; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private telemetryWsService: TelemetryWebsocketService, |
||||
|
private zone: NgZone) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.dataSource = new SystemInfoDataSource(this.telemetryWsService, this.zone); |
||||
|
const sortOrder: SortOrder = { |
||||
|
property: 'serviceId', |
||||
|
direction: Direction.ASC |
||||
|
}; |
||||
|
this.pageLink = new PageLink(MAX_SAFE_PAGE_SIZE, 0, null, sortOrder); |
||||
|
this.dataSource.loadData(this.pageLink); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit() { |
||||
|
this.sort.sortChange.subscribe(() => this.updateData()); |
||||
|
} |
||||
|
|
||||
|
updateData() { |
||||
|
this.pageLink.sortOrder.property = this.sort.active; |
||||
|
this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()]; |
||||
|
this.dataSource.loadData(this.pageLink); |
||||
|
} |
||||
|
|
||||
|
statusClass(value: number): string { |
||||
|
let status = ''; |
||||
|
if (value > 85) { |
||||
|
status = 'tb-status-critical'; |
||||
|
} else if (value > 75) { |
||||
|
status = 'tb-status-warn'; |
||||
|
} |
||||
|
return status; |
||||
|
} |
||||
|
|
||||
|
infoTooltip(serviceData: SystemInfoData, type: 'cpu' | 'ram' | 'disc'): string { |
||||
|
let tooltip = ''; |
||||
|
let value: number; |
||||
|
switch (type) { |
||||
|
case 'cpu': |
||||
|
value = serviceData.cpuUsage; |
||||
|
tooltip += value + ' / 100 %'; |
||||
|
break; |
||||
|
case 'ram': |
||||
|
value = serviceData.memoryUsage; |
||||
|
const memoryUsage = serviceData.memoryUsage; |
||||
|
const totalMemory = serviceData.totalMemory / 1073741824; |
||||
|
const usedMemory = (totalMemory * (memoryUsage / 100)).toFixed(0); |
||||
|
tooltip += usedMemory + ' / ' + totalMemory.toFixed(0) + ' Gb'; |
||||
|
break; |
||||
|
case 'disc': |
||||
|
value = serviceData.discUsage; |
||||
|
const discUsage = serviceData.discUsage; |
||||
|
const totalDiscSpace = serviceData.totalDiscSpace / 1073741824; |
||||
|
const usedDisc = (totalDiscSpace * (discUsage / 100)).toFixed(0); |
||||
|
tooltip += usedDisc + ' / ' + totalDiscSpace.toFixed(0) + ' Gb'; |
||||
|
break; |
||||
|
} |
||||
|
if (value > 85) { |
||||
|
switch (type) { |
||||
|
case 'cpu': |
||||
|
tooltip += '\n\nCritically high CPU usage. To avoid system failure, optimize system performance.'; |
||||
|
break; |
||||
|
case 'ram': |
||||
|
tooltip += '\n\nCritically low reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.'; |
||||
|
break; |
||||
|
case 'disc': |
||||
|
tooltip += '\n\nCritically low disk space. To avoid data loss, free up or expand the disk space.'; |
||||
|
break; |
||||
|
} |
||||
|
} else if (value > 75) { |
||||
|
switch (type) { |
||||
|
case 'cpu': |
||||
|
tooltip += '\n\nRunning high on CPU usage. To avoid system failure, optimize system performance.'; |
||||
|
break; |
||||
|
case 'ram': |
||||
|
tooltip += '\n\nRunning low on reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.'; |
||||
|
break; |
||||
|
case 'disc': |
||||
|
tooltip += '\n\nRunning low on disk space. To avoid data loss, free up or expand the disk space.'; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return tooltip; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export class SystemInfoDataSource implements DataSource<SystemInfoData> { |
||||
|
|
||||
|
private systemDataSubject = new BehaviorSubject<SystemInfoData[]>([]); |
||||
|
private pageDataSubject = new BehaviorSubject<PageData<SystemInfoData>>(emptyPageData<SystemInfoData>()); |
||||
|
|
||||
|
public pageData$ = this.pageDataSubject.asObservable(); |
||||
|
|
||||
|
private allSystemData: Observable<Array<SystemInfoData>>; |
||||
|
|
||||
|
private telemetrySubscriber: TelemetrySubscriber; |
||||
|
|
||||
|
constructor(private telemetryWsService: TelemetryWebsocketService, |
||||
|
private zone: NgZone) { |
||||
|
} |
||||
|
|
||||
|
connect(collectionViewer: CollectionViewer): Observable<SystemInfoData[] | ReadonlyArray<SystemInfoData>> { |
||||
|
return this.systemDataSubject.asObservable(); |
||||
|
} |
||||
|
|
||||
|
disconnect(collectionViewer: CollectionViewer): void { |
||||
|
this.systemDataSubject.complete(); |
||||
|
this.pageDataSubject.complete(); |
||||
|
if (this.telemetrySubscriber) { |
||||
|
this.telemetrySubscriber.unsubscribe(); |
||||
|
this.telemetrySubscriber = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
loadData(pageLink: PageLink): void { |
||||
|
this.getAllSystemData().pipe( |
||||
|
map((data) => pageLink.filterData(data)), |
||||
|
catchError(() => of(emptyPageData<SystemInfoData>())), |
||||
|
).subscribe( |
||||
|
(pageData) => { |
||||
|
this.onSystemData(pageData.data); |
||||
|
this.pageDataSubject.next(pageData); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
getAllSystemData(): Observable<Array<SystemInfoData>> { |
||||
|
if (!this.allSystemData) { |
||||
|
this.telemetrySubscriber = TelemetrySubscriber.createEntityFilterLatestSubscription( |
||||
|
this.telemetryWsService, { type: AliasFilterType.apiUsageState }, this.zone, |
||||
|
[ { key: 'clusterSystemData', type: EntityKeyType.TIME_SERIES } ]); |
||||
|
this.telemetrySubscriber.subscribe(); |
||||
|
this.allSystemData = this.telemetrySubscriber.entityData$.pipe( |
||||
|
map((update) => this.toSystemInfoData(update)), |
||||
|
publishReplay(1), |
||||
|
refCount() |
||||
|
); |
||||
|
} |
||||
|
return this.allSystemData; |
||||
|
} |
||||
|
|
||||
|
private toSystemInfoData(entityDataUpdate: EntityDataUpdate): Array<SystemInfoData> { |
||||
|
const entityData = entityDataUpdate.data?.data ? entityDataUpdate.data?.data : entityDataUpdate.update; |
||||
|
if (entityData && entityData.length) { |
||||
|
const latest = entityData[0].latest; |
||||
|
if (latest && latest[EntityKeyType.TIME_SERIES]) { |
||||
|
const latestTs = latest[EntityKeyType.TIME_SERIES]; |
||||
|
const tsValue = latestTs.clusterSystemData; |
||||
|
if (tsValue && tsValue.value) { |
||||
|
return JSON.parse(tsValue.value); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
protected onSystemData(data: SystemInfoData[]) { |
||||
|
this.systemDataSubject.next(data); |
||||
|
} |
||||
|
|
||||
|
isEmpty(): Observable<boolean> { |
||||
|
return this.systemDataSubject.pipe( |
||||
|
map((entities) => !entities.length), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
total(): Observable<number> { |
||||
|
return this.pageDataSubject.pipe( |
||||
|
map((pageData) => pageData.totalElements), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@app/shared/shared.module'; |
||||
|
import { ClusterInfoTableComponent } from '@home/components/widget/lib/home-page/cluster-info-table.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: |
||||
|
[ |
||||
|
ClusterInfoTableComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule |
||||
|
], |
||||
|
exports: [ |
||||
|
ClusterInfoTableComponent |
||||
|
] |
||||
|
}) |
||||
|
export class HomePageWidgetsModule { } |
||||
Binary file not shown.
Loading…
Reference in new issue