diff --git a/ui-ngx/src/app/core/http/device.service.ts b/ui-ngx/src/app/core/http/device.service.ts index e5dd722419..018e202e81 100644 --- a/ui-ngx/src/app/core/http/device.service.ts +++ b/ui-ngx/src/app/core/http/device.service.ts @@ -25,7 +25,7 @@ import { ClaimResult, Device, DeviceCredentials, - DeviceInfo, + DeviceInfo, DeviceInfoQuery, DeviceSearchQuery } from '@app/shared/models/device.models'; import { EntitySubtype } from '@app/shared/models/entity-type.models'; @@ -42,6 +42,11 @@ export class DeviceService { private http: HttpClient ) { } + public getDeviceInfosByQuery(deviceInfoQuery: DeviceInfoQuery, config?: RequestConfig): Observable> { + return this.http.get>(`/api${deviceInfoQuery.toQuery()}`, + defaultHttpOptionsFromConfig(config)); + } + public getTenantDeviceInfos(pageLink: PageLink, type: string = '', config?: RequestConfig): Observable> { return this.http.get>(`/api/tenant/deviceInfos${pageLink.toQuery()}&type=${type}`, diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts index c6b8ee86e2..d018bfe503 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts @@ -190,7 +190,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal $event.stopPropagation(); } const config = new OverlayConfig({ - panelClass: 'tb-alarm-filter-panel', + panelClass: 'tb-filter-panel', backdropClass: 'cdk-overlay-transparent-backdrop', hasBackdrop: true, maxHeight: '80vh', diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html new file mode 100644 index 0000000000..08448aab83 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html @@ -0,0 +1,74 @@ + + + + + + + + + + +
+ +
+ + +
+
+ + +
+ + + + device.device-state + + + {{ 'device.any' | translate }} + + + {{ 'device.active' | translate }} + + + {{ 'device.inactive' | translate }} + + + +
+ diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.scss b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.scss new file mode 100644 index 0000000000..1c10e244b5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.scss @@ -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. + */ +:host { + display: block; + overflow: hidden; + max-width: 100%; + .mdc-button { + max-width: 100%; + } +} + +:host ::ng-deep { + .mdc-button { + .mat-icon { + min-width: 24px; + } + .mdc-button__label { + overflow: hidden; + text-overflow: ellipsis; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts new file mode 100644 index 0000000000..1f5b35a3ef --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.ts @@ -0,0 +1,254 @@ +/// +/// 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 { + ChangeDetectorRef, + Component, + ElementRef, + forwardRef, + Inject, + InjectionToken, + Input, + OnDestroy, + OnInit, + Optional, + TemplateRef, + ViewChild, + ViewContainerRef +} from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { coerceBoolean } from '@shared/decorators/coerce-boolean'; +import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; +import { TemplatePortal } from '@angular/cdk/portal'; +import { TranslateService } from '@ngx-translate/core'; +import { DeviceInfoFilter } from '@shared/models/device.models'; +import { isDefinedAndNotNull } from '@core/utils'; +import { EntityInfoData } from '@shared/models/entity.models'; +import { DeviceProfileService } from '@core/http/device-profile.service'; + +export const DEVICE_FILTER_CONFIG_DATA = new InjectionToken('DeviceFilterConfigData'); + +export interface DeviceFilterConfigData { + panelMode: boolean; + deviceInfoFilter: DeviceInfoFilter; +} + +// @dynamic +@Component({ + selector: 'tb-device-info-filter', + templateUrl: './device-info-filter.component.html', + styleUrls: ['./device-info-filter.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DeviceInfoFilterComponent), + multi: true + } + ] +}) +export class DeviceInfoFilterComponent implements OnInit, OnDestroy, ControlValueAccessor { + + @ViewChild('deviceFilterPanel') + deviceFilterPanel: TemplateRef; + + @Input() disabled: boolean; + + @coerceBoolean() + @Input() + buttonMode = true; + + panelMode = false; + + buttonDisplayValue = this.translate.instant('device.device-filter'); + + deviceInfoFilterForm: UntypedFormGroup; + + deviceFilterOverlayRef: OverlayRef; + + panelResult: DeviceInfoFilter = null; + + private deviceProfileInfo: EntityInfoData; + + private deviceInfoFilter: DeviceInfoFilter; + + private propagateChange = (_: any) => {}; + + constructor(@Optional() @Inject(DEVICE_FILTER_CONFIG_DATA) + private data: DeviceFilterConfigData | undefined, + @Optional() + private overlayRef: OverlayRef, + private fb: UntypedFormBuilder, + private translate: TranslateService, + private overlay: Overlay, + private nativeElement: ElementRef, + private viewContainerRef: ViewContainerRef, + private deviceProfileService: DeviceProfileService, + private cd: ChangeDetectorRef) { + } + + ngOnInit(): void { + if (this.data) { + this.panelMode = this.data.panelMode; + this.deviceInfoFilter = this.data.deviceInfoFilter; + } + this.deviceInfoFilterForm = this.fb.group({ + deviceProfileId: [null, []], + active: ['', []] + }); + this.deviceInfoFilterForm.valueChanges.subscribe( + () => { + this.updateValidators(); + if (!this.buttonMode) { + this.deviceFilterUpdated(this.deviceInfoFilterForm.value); + } + } + ); + if (this.panelMode) { + this.updateDeviceInfoFilterForm(this.deviceInfoFilter); + } + } + + ngOnDestroy(): void { + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.disabled) { + this.deviceInfoFilterForm.disable({emitEvent: false}); + } else { + this.deviceInfoFilterForm.enable({emitEvent: false}); + this.updateValidators(); + } + } + + writeValue(deviceInfoFilter?: DeviceInfoFilter): void { + this.deviceInfoFilter = deviceInfoFilter; + this.updateButtonDisplayValue(); + this.updateDeviceInfoFilterForm(deviceInfoFilter); + } + + private updateValidators() { + } + + toggleDeviceFilterPanel($event: Event) { + if ($event) { + $event.stopPropagation(); + } + const config = new OverlayConfig({ + panelClass: 'tb-filter-panel', + backdropClass: 'cdk-overlay-transparent-backdrop', + hasBackdrop: true, + maxHeight: '80vh', + height: 'min-content', + minWidth: '' + }); + config.hasBackdrop = true; + const connectedPosition: ConnectedPosition = { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top' + }; + config.positionStrategy = this.overlay.position().flexibleConnectedTo(this.nativeElement) + .withPositions([connectedPosition]); + + this.deviceFilterOverlayRef = this.overlay.create(config); + this.deviceFilterOverlayRef.backdropClick().subscribe(() => { + this.deviceFilterOverlayRef.dispose(); + }); + this.deviceFilterOverlayRef.attach(new TemplatePortal(this.deviceFilterPanel, + this.viewContainerRef)); + } + + cancel() { + this.updateDeviceInfoFilterForm(this.deviceInfoFilter); + if (this.overlayRef) { + this.overlayRef.dispose(); + } else { + this.deviceFilterOverlayRef.dispose(); + } + } + + update() { + this.deviceFilterUpdated(this.deviceInfoFilterForm.value); + if (this.panelMode) { + this.panelResult = this.deviceInfoFilter; + } + if (this.overlayRef) { + this.overlayRef.dispose(); + } else { + this.deviceFilterOverlayRef.dispose(); + } + } + + deviceProfileChanged(deviceProfileInfo: EntityInfoData) { + this.deviceProfileInfo = deviceProfileInfo; + this.updateButtonDisplayValue(); + } + + private updateDeviceInfoFilterForm(deviceInfoFilter?: DeviceInfoFilter) { + this.deviceInfoFilterForm.patchValue({ + deviceProfileId: deviceInfoFilter?.deviceProfileId, + active: isDefinedAndNotNull(deviceInfoFilter?.active) ? deviceInfoFilter?.active : '' + }, {emitEvent: false}); + this.updateValidators(); + } + + private deviceFilterUpdated(deviceInfoFilter: DeviceInfoFilter) { + this.deviceInfoFilter = deviceInfoFilter; + if ((this.deviceInfoFilter.active as any) === '') { + this.deviceInfoFilter.active = null; + } + this.updateButtonDisplayValue(); + this.propagateChange(this.deviceInfoFilter); + } + + private updateButtonDisplayValue() { + if (this.buttonMode) { + const filterTextParts: string[] = []; + if (isDefinedAndNotNull(this.deviceInfoFilter?.deviceProfileId)) { + if (!this.deviceProfileInfo) { + this.deviceProfileService.getDeviceProfileInfo(this.deviceInfoFilter?.deviceProfileId.id, + {ignoreLoading: true, ignoreErrors: true}).subscribe( + (deviceProfileInfo) => { + this.deviceProfileChanged(deviceProfileInfo); + }); + return; + } else { + filterTextParts.push(this.deviceProfileInfo.name); + } + } + if (isDefinedAndNotNull(this.deviceInfoFilter?.active)) { + const translationKey = this.deviceInfoFilter?.active ? 'device.active' : 'device.inactive'; + filterTextParts.push(this.translate.instant(translationKey)); + } + if (!filterTextParts.length) { + this.buttonDisplayValue = this.translate.instant('device.device-filter-title'); + } else { + this.buttonDisplayValue = this.translate.instant('device.filter-title') + `: ${filterTextParts.join(', ')}`; + } + this.cd.detectChanges(); + } + } + +} diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 467d006aab..ffa2d11b99 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -181,6 +181,7 @@ import { SendNotificationButtonComponent } from '@home/components/notification/s import { AlarmFilterConfigComponent } from '@home/components/alarm/alarm-filter-config.component'; import { AlarmAssigneeSelectPanelComponent } from '@home/components/alarm/alarm-assignee-select-panel.component'; import { AlarmAssigneeSelectComponent } from '@home/components/alarm/alarm-assignee-select.component'; +import { DeviceInfoFilterComponent } from '@home/components/device/device-info-filter.component'; @NgModule({ declarations: @@ -282,6 +283,7 @@ import { AlarmAssigneeSelectComponent } from '@home/components/alarm/alarm-assig DeviceProfileComponent, DeviceProfileDialogComponent, AddDeviceProfileDialogComponent, + DeviceInfoFilterComponent, AssetProfileComponent, AssetProfileDialogComponent, AssetProfileAutocompleteComponent, @@ -425,6 +427,7 @@ import { AlarmAssigneeSelectComponent } from '@home/components/alarm/alarm-assig DeviceProfileComponent, DeviceProfileDialogComponent, AddDeviceProfileDialogComponent, + DeviceInfoFilterComponent, RuleChainAutocompleteComponent, DeviceWizardDialogComponent, AssetProfileComponent, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts index abf43a8926..6b0537d968 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts @@ -591,7 +591,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, const target = $event.target || $event.srcElement || $event.currentTarget; const config = new OverlayConfig(); config.backdropClass = 'cdk-overlay-transparent-backdrop'; - config.panelClass = 'tb-alarm-filter-panel'; + config.panelClass = 'tb-filter-panel'; config.hasBackdrop = true; const connectedPosition: ConnectedPosition = { originX: 'end', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss index 912ebbb63e..4cad7a6971 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss @@ -67,4 +67,50 @@ color: inherit; } } + + .tb-no-data-available { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .tb-no-data-bg { + margin: 10px; + position: relative; + flex: 1; + width: 100%; + max-height: 100px; + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #305680; + -webkit-mask-image: url(/assets/home/no_data_folder_bg.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + -webkit-mask-position: center; + mask-image: url(/assets/home/no_data_folder_bg.svg); + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + } + } + + .tb-no-data-text { + font-weight: 500; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.54); + @media #{$mat-md-lg} { + font-size: 12px; + line-height: 16px; + } + } + } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html index 40a1eefe40..ba7614934d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html @@ -16,91 +16,102 @@ -->
-
- {{ 'widgets.recent-dashboards.title' | translate }} - -
- - -
- - - - - - {{ lastVisitedDashboard.starred ? 'star' : 'star_border' }} - - - - - {{ 'widgets.recent-dashboards.name' | translate }} - - - {{ lastVisitedDashboard.title }} - - - - - {{ 'widgets.recent-dashboards.last-viewed' | translate }} - - - {{ lastVisitedDashboard.lastVisited | dateAgo:{applyAgo: true} }} - - - - -
+ +
+ {{ 'widgets.recent-dashboards.title' | translate }} + - -
-
-
{{ 'widgets.recent-dashboards.no-last-viewed-dashboards' | translate }}
+
+ + +
+ + + + + + {{ lastVisitedDashboard.starred ? 'star' : 'star_border' }} + + + + + {{ 'widgets.recent-dashboards.name' | translate }} + + + {{ lastVisitedDashboard.title }} + + + + + {{ 'widgets.recent-dashboards.last-viewed' | translate }} + + + {{ lastVisitedDashboard.lastVisited | dateAgo:{applyAgo: true} }} + + + + +
- - - -
-
-
- {{ dashboard.starred ? 'star' : 'star_border' }} + +
+
+
{{ 'widgets.recent-dashboards.no-last-viewed-dashboards' | translate }}
-
- {{ dashboard.title }} + + + +
+
+
+ {{ dashboard.starred ? 'star' : 'star_border' }} +
+
+ {{ dashboard.title }} +
+ + + + +
+
- - -
- + +
+
{{ 'widgets.recent-dashboards.title' | translate }}
+
+
+
+
widgets.home.no-data-available
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.ts index 33b273ec9f..4bc6ac9982 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.ts @@ -74,6 +74,7 @@ export class RecentDashboardsWidgetComponent extends PageComponent implements On lastVisitedDashboardsPageLink: PageLink; starredDashboardValue = null; + hasDashboardsAccess = true; dirty = false; @@ -84,7 +85,10 @@ export class RecentDashboardsWidgetComponent extends PageComponent implements On } ngOnInit() { - this.reload(); + this.hasDashboardsAccess = [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER].includes(this.authUser.authority); + if (this.hasDashboardsAccess) { + this.reload(); + } } reload() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html index 264b6970ad..a0beeacdb2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html @@ -16,74 +16,85 @@ -->
-
- {{ 'widgets.usage-info.title' | translate }} - - -
- - -
-
-
device.devices
-
asset.assets
-
user.users
-
dashboard.dashboards
-
customer.customers
-
-
-
-
{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}
-
{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}
-
{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}
-
{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}
-
{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}
+ +
+ {{ 'widgets.usage-info.title' | translate }} + + +
+ + +
+
+
device.devices
+
asset.assets
+
user.users
+
dashboard.dashboards
+
customer.customers
-
- - - - - +
+
+
{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}
+
{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}
+
{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}
+
{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}
+
{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}
+
+
+ + + + + +
-
- - -
-
-
api-usage.transport-messages
-
api-usage.javascript
-
api-usage.alarms-created
-
api-usage.email
-
api-usage.sms
-
-
-
-
{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}
-
{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}
-
{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}
-
{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}
-
{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}
+ + +
+
+
api-usage.transport-messages
+
api-usage.javascript
+
api-usage.alarms-created
+
api-usage.email
+
api-usage.sms
-
- - - - - +
+
+
{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}
+
{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}
+
{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}
+
{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}
+
{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}
+
+
+ + + + + +
-
- + + + +
+
{{ 'widgets.usage-info.title' | translate }}
+
+
+
+
widgets.home.no-data-available
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts index ed5ff7dafc..03148d501a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts @@ -44,6 +44,8 @@ export class UsageInfoWidgetComponent extends PageComponent implements OnInit, O entityItemCritical: {[key: string]: boolean} = {}; apiCallItemCritical: {[key: string]: boolean} = {}; + hasUsageInfoAccess = true; + constructor(protected store: Store, private cd: ChangeDetectorRef, private shortNumberPipe: ShortNumberPipe, @@ -52,41 +54,43 @@ export class UsageInfoWidgetComponent extends PageComponent implements OnInit, O } ngOnInit() { - (this.authUser.authority === Authority.TENANT_ADMIN ? - this.usageInfoService.getUsageInfo() : of(null)).subscribe( - (usageInfo) => { - this.usageInfo = usageInfo; - this.entityItemCritical.devices = this.isItemCritical(this.usageInfo?.devices, this.usageInfo?.maxDevices); - this.entityItemCritical.assets = this.isItemCritical(this.usageInfo?.assets, this.usageInfo?.maxAssets); - this.entityItemCritical.users = this.isItemCritical(this.usageInfo?.users, this.usageInfo?.maxUsers); - this.entityItemCritical.dashboards = this.isItemCritical(this.usageInfo?.dashboards, this.usageInfo?.maxDashboards); - this.entityItemCritical.customers = this.isItemCritical(this.usageInfo?.customers, this.usageInfo?.maxCustomers); - this.apiCallItemCritical.transportMessages = this.isItemCritical(this.usageInfo?.transportMessages, - this.usageInfo?.maxTransportMessages); - this.apiCallItemCritical.jsExecutions = this.isItemCritical(this.usageInfo?.jsExecutions, this.usageInfo?.maxJsExecutions); - this.apiCallItemCritical.alarms = this.isItemCritical(this.usageInfo?.alarms, this.usageInfo?.maxAlarms); - this.apiCallItemCritical.emails = this.isItemCritical(this.usageInfo?.emails, this.usageInfo?.maxEmails); - this.apiCallItemCritical.sms = this.isItemCritical(this.usageInfo?.sms, this.usageInfo?.maxSms); - let entitiesHasCriticalItem = false; - let apiCallsHasCriticalItem = false; - for (const key of Object.keys(this.entityItemCritical)) { - if (this.entityItemCritical[key]) { - entitiesHasCriticalItem = true; - break; + this.hasUsageInfoAccess = this.authUser.authority === Authority.TENANT_ADMIN; + if (this.hasUsageInfoAccess) { + this.usageInfoService.getUsageInfo().subscribe( + (usageInfo) => { + this.usageInfo = usageInfo; + this.entityItemCritical.devices = this.isItemCritical(this.usageInfo?.devices, this.usageInfo?.maxDevices); + this.entityItemCritical.assets = this.isItemCritical(this.usageInfo?.assets, this.usageInfo?.maxAssets); + this.entityItemCritical.users = this.isItemCritical(this.usageInfo?.users, this.usageInfo?.maxUsers); + this.entityItemCritical.dashboards = this.isItemCritical(this.usageInfo?.dashboards, this.usageInfo?.maxDashboards); + this.entityItemCritical.customers = this.isItemCritical(this.usageInfo?.customers, this.usageInfo?.maxCustomers); + this.apiCallItemCritical.transportMessages = this.isItemCritical(this.usageInfo?.transportMessages, + this.usageInfo?.maxTransportMessages); + this.apiCallItemCritical.jsExecutions = this.isItemCritical(this.usageInfo?.jsExecutions, this.usageInfo?.maxJsExecutions); + this.apiCallItemCritical.alarms = this.isItemCritical(this.usageInfo?.alarms, this.usageInfo?.maxAlarms); + this.apiCallItemCritical.emails = this.isItemCritical(this.usageInfo?.emails, this.usageInfo?.maxEmails); + this.apiCallItemCritical.sms = this.isItemCritical(this.usageInfo?.sms, this.usageInfo?.maxSms); + let entitiesHasCriticalItem = false; + let apiCallsHasCriticalItem = false; + for (const key of Object.keys(this.entityItemCritical)) { + if (this.entityItemCritical[key]) { + entitiesHasCriticalItem = true; + break; + } } - } - for (const key of Object.keys(this.apiCallItemCritical)) { - if (this.apiCallItemCritical[key]) { - apiCallsHasCriticalItem = true; - break; + for (const key of Object.keys(this.apiCallItemCritical)) { + if (this.apiCallItemCritical[key]) { + apiCallsHasCriticalItem = true; + break; + } } + if (apiCallsHasCriticalItem && !entitiesHasCriticalItem) { + this.toggleValue = 'apiCalls'; + } + this.cd.markForCheck(); } - if (apiCallsHasCriticalItem && !entitiesHasCriticalItem) { - this.toggleValue = 'apiCalls'; - } - this.cd.markForCheck(); - } - ); + ); + } } maxValue(max: number): number | string { diff --git a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.html b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.html index 043f1b1d17..c8fdbf81dd 100644 --- a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.html +++ b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.html @@ -15,10 +15,6 @@ limitations under the License. --> - - + + diff --git a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.ts b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.ts index 6f424c8bb1..e169de5f07 100644 --- a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.ts +++ b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.ts @@ -18,7 +18,7 @@ import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component'; -import { DeviceInfo } from '@app/shared/models/device.models'; +import { DeviceInfo, DeviceInfoFilter } from '@app/shared/models/device.models'; import { EntityType } from '@shared/models/entity-type.models'; import { DeviceProfileId } from '../../../../shared/models/id/device-profile-id'; @@ -35,8 +35,8 @@ export class DeviceTableHeaderComponent extends EntityTableHeaderComponent> { @@ -103,17 +118,16 @@ export class DevicesTableConfigResolver implements Resolve this.translate.instant('device.delete-devices-text'); this.config.loadEntity = id => this.deviceService.getDeviceInfo(id.id); - this.config.saveEntity = device => { - return this.deviceService.saveDevice(device).pipe( + this.config.saveEntity = device => this.deviceService.saveDevice(device).pipe( tap(() => { this.broadcast.broadcast('deviceSaved'); }), mergeMap((savedDevice) => this.deviceService.getDeviceInfo(savedDevice.id.id) )); - }; this.config.onEntityAction = action => this.onDeviceAction(action, this.config); this.config.detailsReadonly = () => (this.config.componentsData.deviceScope === 'customer_user' || this.config.componentsData.deviceScope === 'edge_customer_user'); + this.config.onLoadAction = (route) => this.onLoadAction(route); this.config.headerComponent = DeviceTableHeaderComponent; @@ -123,7 +137,7 @@ export class DevicesTableConfigResolver implements Resolve(), edgeId: routeParams.edgeId }; @@ -162,7 +176,8 @@ export class DevicesTableConfigResolver implements Resolve this.config.componentsData.deviceScope === 'tenant'; return this.config; @@ -170,48 +185,97 @@ export class DevicesTableConfigResolver implements Resolve> { const columns: Array> = [ new DateEntityTableColumn('createdTime', 'common.created-time', this.datePipe, '150px'), new EntityTableColumn('name', 'device.name', '25%'), new EntityTableColumn('deviceProfileName', 'device-profile.device-profile', '25%'), - new EntityTableColumn('label', 'device.label', '25%') + new EntityTableColumn('label', 'device.label', '25%'), + new EntityTableColumn('active', 'device.state', '80px', + entity => this.deviceState(entity), entity => this.deviceStateStyle(entity)) ]; if (deviceScope === 'tenant') { columns.push( new EntityTableColumn('customerTitle', 'customer.customer', '25%'), new EntityTableColumn('customerIsPublic', 'device.public', '60px', - entity => { - return checkBoxCell(entity.customerIsPublic); - }, () => ({}), false), + entity => checkBoxCell(entity.customerIsPublic), () => ({})), ); } columns.push( new EntityTableColumn('gateway', 'device.is-gateway', '60px', - entity => { - return checkBoxCell(entity.additionalInfo && entity.additionalInfo.gateway); - }, () => ({}), false) + entity => checkBoxCell(entity.additionalInfo && entity.additionalInfo.gateway), () => ({}), false) ); return columns; } + private deviceState(device: DeviceInfo): string { + let translateKey = 'device.active'; + let backgroundColor = 'rgba(25, 128, 56, 0.08)'; + if (!device.active) { + translateKey = 'device.inactive'; + backgroundColor = 'rgba(209, 39, 48, 0.08)'; + } + return `
+ ${this.translate.instant(translateKey)} +
`; + } + + private deviceStateStyle(device: DeviceInfo): object { + const styleObj = { + fontSize: '14px', + color: '#198038', + cursor: 'pointer' + }; + if (!device.active) { + styleObj.color = '#d12730'; + } + return styleObj; + } + configureEntityFunctions(deviceScope: string): void { + this.config.entitiesFetchFunction = pageLink => this.deviceService.getDeviceInfosByQuery(this.prepareDeviceInfoQuery(pageLink)); if (deviceScope === 'tenant') { - this.config.entitiesFetchFunction = pageLink => - this.deviceService.getTenantDeviceInfosByDeviceProfileId(pageLink, - this.config.componentsData.deviceProfileId !== null ? - this.config.componentsData.deviceProfileId.id : ''); this.config.deleteEntity = id => this.deviceService.deleteDevice(id.id); - } else if (deviceScope === 'edge' || deviceScope === 'edge_customer_user') { - this.config.entitiesFetchFunction = pageLink => - this.deviceService.getEdgeDevices(this.config.componentsData.edgeId, pageLink, this.config.componentsData.edgeType); } else { - this.config.entitiesFetchFunction = pageLink => - this.deviceService.getCustomerDeviceInfosByDeviceProfileId(this.customerId, pageLink, - this.config.componentsData.deviceProfileId !== null ? - this.config.componentsData.deviceProfileId.id : ''); - this.config.deleteEntity = id => this.deviceService.unassignDeviceFromCustomer(id.id); + this.config.deleteEntity = () => of(); + } + } + + prepareDeviceInfoQuery(pageLink: PageLink): DeviceInfoQuery { + const deviceInfoFilter: DeviceInfoFilter = deepClone(this.config.componentsData.deviceInfoFilter); + if (this.config.componentsData.deviceScope === 'edge' || this.config.componentsData.deviceScope === 'edge_customer_user') { + deviceInfoFilter.edgeId = new EdgeId(this.config.componentsData.edgeId); + } else if (this.config.componentsData.deviceScope !== 'tenant') { + deviceInfoFilter.customerId = new CustomerId(this.customerId); } + return new DeviceInfoQuery(pageLink, deviceInfoFilter); } configureCellActions(deviceScope: string): Array> { @@ -540,7 +604,8 @@ export class DevicesTableConfigResolver implements Resolve { if (isDefinedAndNotNull(deviceCredentials)) { diff --git a/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw b/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw index 6735860bd4..9205fddf71 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw +++ b/ui-ngx/src/app/modules/home/pages/home-links/tenant_admin_home_page.raw @@ -648,9 +648,9 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
\n
\n {{ 'device.devices' | translate }}\n
\n \n
\n
\n \n
\n
widgets.devices.inactive
\n
\n
\n
${inactiveDevices:0}
\n
\n \n \n
\n
widgets.devices.active
\n
\n
\n
${activeDevices:0}
\n
\n \n \n
\n
widgets.devices.total
\n
\n
\n
${totalDevices:0}
\n
\n \n
\n
\n
", + "markdownTextPattern": "
\n
\n
\n
\n {{ 'device.devices' | translate }}\n
\n \n
\n
\n \n
\n
widgets.devices.inactive
\n
\n
\n
${inactiveDevices:0}
\n
\n \n \n
\n
widgets.devices.active
\n
\n
\n
${activeDevices:0}
\n
\n \n \n
\n
widgets.devices.total
\n
\n
\n
${totalDevices:0}
\n
\n \n
\n
\n
", "applyDefaultMarkdownStyle": false, - "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n\n.tb-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 12px;\n}\n\n.tb-card-header {\n height: 36px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-item-cards {\n flex: 1;\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\na.tb-item-card {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 8px 12px;\n border: 1px solid;\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\na.tb-item-card.tb-inactive {\n background: rgba(209, 39, 48, 0.04);\n border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n background: rgba(48, 86, 128, 0.04);\n border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n background: rgba(0, 0, 0, 0.01);\n border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n display: grid;\n}\n\n.tb-item-title {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; \n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n position: absolute;\n right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 36px;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n .tb-item-cards {\n flex-direction: column;\n }\n a.tb-item-card {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1279px) {\n a.tb-item-card {\n flex-direction: row;\n align-items: center;\n }\n .tb-item-title.tb-home-widget-link:after {\n position: relative;\n }\n .tb-count-container {\n align-items: flex-end;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-item-title {\n font-size: 11px;\n line-height: 16px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n a.tb-item-card {\n padding: 4px 8px;\n margin-bottom: 6px;\n }\n a.tb-item-card:hover {\n box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n }\n}\n" + "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n\n.tb-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 12px;\n}\n\n.tb-card-header {\n height: 36px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-item-cards {\n flex: 1;\n display: flex;\n flex-direction: row;\n gap: 12px;\n overflow: hidden;\n}\n\na.tb-item-card {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 8px 12px;\n border: 1px solid;\n border-radius: 10px;\n margin-bottom: 12px;\n overflow: hidden;\n justify-content: space-evenly;\n}\n\na.tb-item-card.tb-inactive {\n background: rgba(209, 39, 48, 0.04);\n border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n background: rgba(48, 86, 128, 0.04);\n border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n background: rgba(0, 0, 0, 0.01);\n border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n display: grid;\n}\n\n.tb-item-title {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; \n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n position: absolute;\n right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 36px;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n .tb-item-cards {\n flex-direction: column;\n }\n a.tb-item-card {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1279px) {\n a.tb-item-card {\n flex-direction: row;\n align-items: center;\n }\n .tb-item-title.tb-home-widget-link:after {\n position: relative;\n }\n .tb-count-container {\n align-items: flex-end;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-item-title {\n font-size: 11px;\n line-height: 16px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n a.tb-item-card {\n padding: 4px 8px;\n margin-bottom: 6px;\n }\n a.tb-item-card:hover {\n box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n }\n}\n" }, "title": "Devices", "showTitleIcon": false, @@ -804,7 +804,7 @@ "useMarkdownTextFunction": false, "markdownTextPattern": "
\n
\n
\n
\n {{ 'alarm.alarms' | translate }}\n
\n
\n
\n \n
\n
widgets.alarms.critical
\n
\n
\n
${criticalAlarms:0}
\n
\n \n \n
\n
widgets.alarms.assigned-to-me
\n
\n
\n
${assignedToMeAlarms:0}
\n
\n \n \n
\n
widgets.alarms.total
\n
\n
\n
${totalAlarms:0}
\n
\n \n
\n
\n
", "applyDefaultMarkdownStyle": false, - "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n\n.tb-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 12px;\n}\n\n.tb-card-header {\n height: 36px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-item-cards {\n flex: 1;\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\na.tb-item-card {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 8px 12px;\n border: 1px solid;\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\na.tb-item-card.tb-critical {\n background: rgba(209, 39, 48, 0.04);\n border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n background: rgba(48, 86, 128, 0.04);\n border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n background: rgba(0, 0, 0, 0.01);\n border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n display: grid;\n}\n\n.tb-item-title {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; \n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n position: absolute;\n right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 36px;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n content: \"warning\";\n display: inline-block;\n position: relative;\n font-family: 'Material Icons Round';\n color: #D12730;\n vertical-align: bottom;\n margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n .tb-item-cards {\n flex-direction: column;\n }\n a.tb-item-card {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1279px) {\n a.tb-item-card {\n flex-direction: row;\n align-items: center;\n }\n .tb-item-title.tb-home-widget-link:after {\n position: relative;\n }\n .tb-count-container {\n align-items: flex-end;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-item-title {\n font-size: 11px;\n line-height: 16px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n a.tb-item-card {\n padding: 4px 8px;\n margin-bottom: 6px;\n }\n a.tb-item-card:hover {\n box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n }\n a.tb-item-card.tb-critical .tb-count:after {\n margin-left: 2px;\n }\n}\n" + "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n\n.tb-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 12px;\n}\n\n.tb-card-header {\n height: 36px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-item-cards {\n flex: 1;\n display: flex;\n flex-direction: row;\n gap: 12px;\n overflow: hidden;\n}\n\na.tb-item-card {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 8px 12px;\n border: 1px solid;\n border-radius: 10px;\n margin-bottom: 12px;\n overflow: hidden;\n justify-content: space-evenly;\n}\n\na.tb-item-card.tb-critical {\n background: rgba(209, 39, 48, 0.04);\n border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n background: rgba(48, 86, 128, 0.04);\n border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n background: rgba(0, 0, 0, 0.01);\n border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n display: grid;\n}\n\n.tb-item-title {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; \n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n position: absolute;\n right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 36px;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n content: \"warning\";\n display: inline-block;\n position: relative;\n font-family: 'Material Icons Round';\n color: #D12730;\n vertical-align: bottom;\n margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n .tb-item-cards {\n flex-direction: column;\n }\n a.tb-item-card {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1279px) {\n a.tb-item-card {\n flex-direction: row;\n align-items: center;\n }\n .tb-item-title.tb-home-widget-link:after {\n position: relative;\n }\n .tb-count-container {\n align-items: flex-end;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-item-title {\n font-size: 11px;\n line-height: 16px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n a.tb-item-card {\n padding: 4px 8px;\n margin-bottom: 6px;\n }\n a.tb-item-card:hover {\n box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n }\n a.tb-item-card.tb-critical .tb-count:after {\n margin-left: 2px;\n }\n}\n" }, "title": "Alarms", "showTitleIcon": false, diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts index 1cf06e9ec6..94231a26f6 100644 --- a/ui-ngx/src/app/shared/models/device.models.ts +++ b/ui-ngx/src/app/shared/models/device.models.ts @@ -35,6 +35,9 @@ import { getDefaultProfileObserveAttrConfig, PowerMode } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models'; +import { PageLink } from '@shared/models/page/page-link'; +import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils'; +import { EdgeId } from '@shared/models/id/edge-id'; export enum DeviceProfileType { DEFAULT = 'DEFAULT', @@ -328,7 +331,7 @@ export interface DeviceProvisionConfiguration { allowCreateNewDevicesByX509Certificate?: boolean; } -export function createDeviceProfileConfiguration(type: DeviceProfileType): DeviceProfileConfiguration { +export const createDeviceProfileConfiguration = (type: DeviceProfileType): DeviceProfileConfiguration => { let configuration: DeviceProfileConfiguration = null; if (type) { switch (type) { @@ -339,9 +342,9 @@ export function createDeviceProfileConfiguration(type: DeviceProfileType): Devic } } return configuration; -} +}; -export function createDeviceConfiguration(type: DeviceProfileType): DeviceConfiguration { +export const createDeviceConfiguration = (type: DeviceProfileType): DeviceConfiguration => { let configuration: DeviceConfiguration = null; if (type) { switch (type) { @@ -352,9 +355,9 @@ export function createDeviceConfiguration(type: DeviceProfileType): DeviceConfig } } return configuration; -} +}; -export function createDeviceProfileTransportConfiguration(type: DeviceTransportType): DeviceProfileTransportConfiguration { +export const createDeviceProfileTransportConfiguration = (type: DeviceTransportType): DeviceProfileTransportConfiguration => { let transportConfiguration: DeviceProfileTransportConfiguration = null; if (type) { switch (type) { @@ -408,9 +411,9 @@ export function createDeviceProfileTransportConfiguration(type: DeviceTransportT } } return transportConfiguration; -} +}; -export function createDeviceTransportConfiguration(type: DeviceTransportType): DeviceTransportConfiguration { +export const createDeviceTransportConfiguration = (type: DeviceTransportType): DeviceTransportConfiguration => { let transportConfiguration: DeviceTransportConfiguration = null; if (type) { switch (type) { @@ -446,7 +449,7 @@ export function createDeviceTransportConfiguration(type: DeviceTransportType): D } } return transportConfiguration; -} +}; export enum AlarmConditionType { SIMPLE = 'SIMPLE', @@ -489,7 +492,7 @@ export const AlarmScheduleTypeTranslationMap = new Map + !(!alarmRule || !alarmRule.condition || !alarmRule.condition.condition || !alarmRule.condition.condition.length); + +export const alarmRuleValidator = (control: AbstractControl): ValidationErrors | null => { const alarmRule: AlarmRule = control.value; return alarmRuleValid(alarmRule) ? null : {alarmRule: true}; -} - -function alarmRuleValid(alarmRule: AlarmRule): boolean { - if (!alarmRule || !alarmRule.condition || !alarmRule.condition.condition || !alarmRule.condition.condition.length) { - return false; - } - return true; -} +}; export interface DeviceProfileAlarm { id: string; @@ -539,7 +538,7 @@ export interface DeviceProfileAlarm { propagateRelationTypes?: Array; } -export function deviceProfileAlarmValidator(control: AbstractControl): ValidationErrors | null { +export const deviceProfileAlarmValidator = (control: AbstractControl): ValidationErrors | null => { const deviceProfileAlarm: DeviceProfileAlarm = control.value; if (deviceProfileAlarm && deviceProfileAlarm.id && deviceProfileAlarm.alarmType && deviceProfileAlarm.createRules) { @@ -564,7 +563,7 @@ export function deviceProfileAlarmValidator(control: AbstractControl): Validatio } } return {deviceProfileAlarm: true}; -} +}; export interface DeviceProfileData { @@ -718,6 +717,47 @@ export interface DeviceInfo extends Device { customerTitle: string; customerIsPublic: boolean; deviceProfileName: string; + active: boolean; +} + +export interface DeviceInfoFilter { + customerId?: CustomerId; + edgeId?: EdgeId; + type?: string; + deviceProfileId?: DeviceProfileId; + active?: boolean; +} + +export class DeviceInfoQuery { + + pageLink: PageLink; + deviceInfoFilter: DeviceInfoFilter; + + constructor(pageLink: PageLink, deviceInfoFilter: DeviceInfoFilter) { + this.pageLink = pageLink; + this.deviceInfoFilter = deviceInfoFilter; + } + + public toQuery(): string { + let query; + if (this.deviceInfoFilter.customerId) { + query = `/customer/${this.deviceInfoFilter.customerId.id}/deviceInfos`; + } else if (this.deviceInfoFilter.edgeId) { + query = `/edge/${this.deviceInfoFilter.edgeId.id}/devices`; + } else { + query = '/tenant/deviceInfos'; + } + query += this.pageLink.toQuery(); + if (isNotEmptyStr(this.deviceInfoFilter.type)) { + query += `&type=${this.deviceInfoFilter.type}`; + } else if (this.deviceInfoFilter.deviceProfileId) { + query += `&deviceProfileId=${this.deviceInfoFilter.deviceProfileId.id}`; + } + if (isDefinedAndNotNull(this.deviceInfoFilter.active)) { + query += `&active=${this.deviceInfoFilter.active}`; + } + return query; + } } export enum DeviceCredentialsType { @@ -763,13 +803,11 @@ export interface DeviceCredentialMQTTBasic { password: string; } -export function getDeviceCredentialMQTTDefault(): DeviceCredentialMQTTBasic { - return { - clientId: '', - userName: '', - password: '' - }; -} +export const getDeviceCredentialMQTTDefault = (): DeviceCredentialMQTTBasic => ({ + clientId: '', + userName: '', + password: '' +}); export interface DeviceSearchQuery extends EntitySearchQuery { deviceTypes: Array; @@ -800,44 +838,23 @@ export const dayOfWeekTranslations = new Array( 'device-profile.schedule-day.sunday' ); -export function getDayString(day: number): string { - switch (day) { - case 0: - return 'device-profile.schedule-day.monday'; - case 1: - return this.translate.instant('device-profile.schedule-day.tuesday'); - case 2: - return this.translate.instant('device-profile.schedule-day.wednesday'); - case 3: - return this.translate.instant('device-profile.schedule-day.thursday'); - case 4: - return this.translate.instant('device-profile.schedule-day.friday'); - case 5: - return this.translate.instant('device-profile.schedule-day.saturday'); - case 6: - return this.translate.instant('device-profile.schedule-day.sunday'); - } -} - -export function timeOfDayToUTCTimestamp(date: Date | number): number { +export const timeOfDayToUTCTimestamp = (date: Date | number): number => { if (typeof date === 'number' || date === null) { return 0; } return _moment.utc([1970, 0, 1, date.getHours(), date.getMinutes(), date.getSeconds(), 0]).valueOf(); -} +}; -export function utcTimestampToTimeOfDay(time = 0): Date { - return new Date(time + new Date(time).getTimezoneOffset() * 60 * 1000); -} +export const utcTimestampToTimeOfDay = (time = 0): Date => new Date(time + new Date(time).getTimezoneOffset() * 60 * 1000); -function timeOfDayToMoment(date: Date | number): _moment.Moment { +const timeOfDayToMoment = (date: Date | number): _moment.Moment => { if (typeof date === 'number' || date === null) { return _moment([1970, 0, 1, 0, 0, 0, 0]); } return _moment([1970, 0, 1, date.getHours(), date.getMinutes(), 0, 0]); -} +}; -export function getAlarmScheduleRangeText(startsOn: Date | number, endsOn: Date | number): string { +export const getAlarmScheduleRangeText = (startsOn: Date | number, endsOn: Date | number): string => { const start = timeOfDayToMoment(startsOn); const end = timeOfDayToMoment(endsOn); if (start < end) { @@ -847,4 +864,4 @@ export function getAlarmScheduleRangeText(startsOn: Date | number, endsOn: Date } return `12:00 AM – ${end.format('hh:mm A')}` + ` and ${start.format('hh:mm A')} – 12:00 PM`; -} +}; diff --git a/ui-ngx/src/assets/home/no_data_folder_bg.svg b/ui-ngx/src/assets/home/no_data_folder_bg.svg new file mode 100644 index 0000000000..5c3d9ef141 --- /dev/null +++ b/ui-ngx/src/assets/home/no_data_folder_bg.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 3aac9e1909..bf36a7d81d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -1296,6 +1296,14 @@ "unable-delete-device-alias-text": "Device alias '{{deviceAlias}}' can't be deleted as it used by the following widget(s):
{{widgetsList}}", "is-gateway": "Is gateway", "overwrite-activity-time": "Overwrite activity time for connected device", + "device-filter": "Device filter", + "device-filter-title": "Device Filter", + "filter-title": "Filter", + "device-state": "Device state", + "state": "State", + "any": "Any", + "active": "Active", + "inactive": "Inactive", "public": "Public", "device-public": "Device is public", "select-device": "Select device", @@ -5131,6 +5139,9 @@ "color": "Color", "shadow-color": "Shadow color" }, + "home": { + "no-data-available": "No data available" + }, "system-info": { "cpu": "CPU", "ram": "RAM", diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index f008d765c5..39885d1191 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -266,7 +266,7 @@ pre.tb-highlight { letter-spacing: normal; } -.tb-timewindow-panel, .tb-legend-config-panel, .tb-alarm-filter-panel { +.tb-timewindow-panel, .tb-legend-config-panel, .tb-filter-panel { overflow: hidden; background: #fff; border-radius: 4px;