+
+
+
+
+ {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
+
+
+
+
+ widgets-bundle.no-widgets-bundles-text
+
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index 12ac10298e..30a9dc7c2b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -29,8 +29,15 @@
flex: 0 0 100%;
max-width: 100%;
+ &:hover {
+ .mat-card {
+ box-shadow: 0 2px 6px 6px rgb(0 0 0 / 20%), 0 1px 4px 2px rgb(0 0 0 / 14%), 0 1px 6px 0 rgb(0 0 0 / 12%)
+ }
+ }
+
.mat-card {
cursor: pointer;
+ transition: box-shadow 0.2s;
.preview-container {
text-align: center;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
index 5e8cc7f36f..c51cc9c37f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
@@ -20,8 +20,7 @@ import { IAliasController } from '@core/api/widget-api.models';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { WidgetService } from '@core/http/widget.service';
import { WidgetInfo, widgetType } from '@shared/models/widget.models';
-import { toWidgetInfo } from '@home/models/widget-component.models';
-import { distinctUntilChanged, map, publishReplay, refCount, switchMap, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, publishReplay, refCount, share, switchMap, tap } from 'rxjs/operators';
import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { isDefinedAndNotNull } from '@core/utils';
@@ -37,18 +36,28 @@ export class DashboardWidgetSelectComponent implements OnInit {
private filterWidgetTypes$ = new BehaviorSubject
>(null);
private widgetsInfo: Observable>;
private widgetsBundleValue: WidgetsBundle;
- private widgetsType = new Set();
+ widgetTypes = new Set();
widgets$: Observable>;
+ loadingWidgetsSubject: BehaviorSubject = new BehaviorSubject(false);
+ loadingWidgets$ = this.loadingWidgetsSubject.pipe(
+ share()
+ );
widgetsBundles$: Observable>;
+ loadingWidgetBundlesSubject: BehaviorSubject = new BehaviorSubject(true);
+ loadingWidgetBundles$ = this.loadingWidgetBundlesSubject.pipe(
+ share()
+ );
- @Input()
set widgetsBundle(widgetBundle: WidgetsBundle) {
- this.widgetsInfo = null;
- this.widgetsType.clear();
- this.widgetsTypes.emit(this.widgetsType);
- this.filterWidgetTypes$.next(null);
- this.widgetsBundleValue = widgetBundle;
+ if (this.widgetsBundleValue !== widgetBundle) {
+ this.widgetsBundleValue = widgetBundle;
+ if (widgetBundle === null) {
+ this.widgetTypes.clear();
+ }
+ this.filterWidgetTypes$.next(null);
+ this.widgetsInfo = null;
+ }
}
get widgetsBundle(): WidgetsBundle {
@@ -74,14 +83,8 @@ export class DashboardWidgetSelectComponent implements OnInit {
@Output()
widgetsBundleSelected: EventEmitter = new EventEmitter();
- @Output()
- widgetsTypes: EventEmitter> = new EventEmitter>();
-
constructor(private widgetsService: WidgetService,
private sanitizer: DomSanitizer) {
- }
-
- ngOnInit(): void {
this.widgetsBundles$ = this.search$.asObservable().pipe(
distinctUntilChanged(),
switchMap(search => this.fetchWidgetBundle(search))
@@ -92,27 +95,41 @@ export class DashboardWidgetSelectComponent implements OnInit {
);
}
+ ngOnInit(): void {
+ }
+
private getWidgets(): Observable> {
if (!this.widgetsInfo) {
if (this.widgetsBundle !== null) {
const bundleAlias = this.widgetsBundle.alias;
const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID;
+ this.loadingWidgetsSubject.next(true);
this.widgetsInfo = this.widgetsService.getBundleWidgetTypeInfos(bundleAlias, isSystem).pipe(
- map(widgets => widgets.sort((a, b) => b.createdTime - a.createdTime)),
- map(widgets => widgets.map((widgetTypeInfo) => {
- this.widgetsType.add(widgetTypeInfo.widgetType);
- const widget: WidgetInfo = {
- isSystemType: isSystem,
- bundleAlias,
- typeAlias: widgetTypeInfo.alias,
- type: widgetTypeInfo.widgetType,
- title: widgetTypeInfo.name,
- image: widgetTypeInfo.image,
- description: widgetTypeInfo.description
- };
- return widget;
- })),
- tap(() => this.widgetsTypes.emit(this.widgetsType)),
+ map(widgets => {
+ widgets = widgets.sort((a, b) => b.createdTime - a.createdTime);
+ const widgetTypes = new Set();
+ const widgetInfos = widgets.map((widgetTypeInfo) => {
+ widgetTypes.add(widgetTypeInfo.widgetType);
+ const widget: WidgetInfo = {
+ isSystemType: isSystem,
+ bundleAlias,
+ typeAlias: widgetTypeInfo.alias,
+ type: widgetTypeInfo.widgetType,
+ title: widgetTypeInfo.name,
+ image: widgetTypeInfo.image,
+ description: widgetTypeInfo.description
+ };
+ return widget;
+ }
+ );
+ setTimeout(() => {
+ this.widgetTypes = widgetTypes;
+ });
+ return widgetInfos;
+ }),
+ tap(() => {
+ this.loadingWidgetsSubject.next(false);
+ }),
publishReplay(1),
refCount()
);
@@ -147,6 +164,7 @@ export class DashboardWidgetSelectComponent implements OnInit {
private getWidgetsBundle(): Observable> {
return this.widgetsService.getAllWidgetsBundles().pipe(
+ tap(() => this.loadingWidgetBundlesSubject.next(false)),
publishReplay(1),
refCount()
);
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
index 363b6cae32..03e5abeb3c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
@@ -20,7 +20,7 @@
@@ -31,7 +31,7 @@
-
+
@@ -70,7 +70,7 @@
(click)="editDataKey(key, $index)" mat-button mat-icon-button class="tb-mat-32">
edit
- close
+ close
@@ -91,7 +93,7 @@
[displayWith]="displayKeyFn">
-
+
@@ -128,7 +130,7 @@
{{ translate.get('entity.no-key-matching',
{key: truncate.transform(searchText, true, 6, '...')}) | async }}
-
+
entity.create-new-key
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
index 96bd8c702f..ff7f5e2f0c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
@@ -121,7 +121,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
private requiredValue: boolean;
get required(): boolean {
- return this.requiredValue || !this.optDataKeys || this.datasourceType === DatasourceType.entityCount;
+ return this.requiredValue || !this.optDataKeys || this.isEntityCountDatasource;
}
@Input()
set required(value: boolean) {
@@ -217,7 +217,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
if (this.maxDataKeys !== null && this.maxDataKeys > -1) {
if (this.datasourceType === DatasourceType.function) {
return this.translate.instant('datakey.maximum-function-types', {count: this.maxDataKeys});
- } else if (this.datasourceType !== DatasourceType.entityCount) {
+ } else if (!this.isEntityCountDatasource) {
return this.translate.instant('datakey.maximum-timeseries-or-attributes', {count: this.maxDataKeys});
} else {
return '';
@@ -250,7 +250,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
private reset() {
if (this.widgetType === widgetType.alarm) {
this.keys = this.utils.getDefaultAlarmDataKeys();
- } else if (this.datasourceType === DatasourceType.entityCount) {
+ } else if (this.isEntityCountDatasource) {
this.keys = [this.callbacks.generateDataKey('count', DataKeyType.count)];
} else {
this.keys = [];
@@ -271,11 +271,10 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
const change = changes[propName];
if (!change.firstChange && change.currentValue !== change.previousValue) {
if (propName === 'entityAliasId') {
- this.searchText = '';
- this.fetchObservable$ = null;
- this.latestSearchTextResult = null;
+ this.clearSearchCache();
this.dirty = true;
} else if (['widgetType', 'datasourceType'].includes(propName)) {
+ this.clearSearchCache();
this.updateParams();
setTimeout(() => {
this.reset();
@@ -436,20 +435,18 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
if (this.datasourceType === DatasourceType.function) {
const targetKeysList = this.widgetType === widgetType.alarm ? this.alarmKeys : this.functionTypeKeys;
fetchObservable = of(targetKeysList);
- } else {
- if (this.datasourceType !== DatasourceType.entityCount && this.entityAliasId) {
- const dataKeyTypes = [DataKeyType.timeseries];
- if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
- dataKeyTypes.push(DataKeyType.attribute);
- dataKeyTypes.push(DataKeyType.entityField);
- if (this.widgetType === widgetType.alarm) {
- dataKeyTypes.push(DataKeyType.alarm);
- }
+ } else if (this.datasourceType === DatasourceType.entity && this.entityAliasId) {
+ const dataKeyTypes = [DataKeyType.timeseries];
+ if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
+ dataKeyTypes.push(DataKeyType.attribute);
+ dataKeyTypes.push(DataKeyType.entityField);
+ if (this.widgetType === widgetType.alarm) {
+ dataKeyTypes.push(DataKeyType.alarm);
}
- fetchObservable = this.callbacks.fetchEntityKeys(this.entityAliasId, dataKeyTypes);
- } else {
- fetchObservable = of([]);
}
+ fetchObservable = this.callbacks.fetchEntityKeys(this.entityAliasId, dataKeyTypes);
+ } else {
+ fetchObservable = of([]);
}
this.fetchObservable$ = fetchObservable.pipe(
publishReplay(1),
@@ -477,4 +474,13 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
}, 0);
}
+ get isEntityCountDatasource(): boolean {
+ return this.datasourceType === DatasourceType.entityCount;
+ }
+
+ private clearSearchCache() {
+ this.searchText = '';
+ this.fetchObservable$ = null;
+ this.latestSearchTextResult = null;
+ }
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 8b745c480f..ea1cd70932 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -263,15 +263,6 @@