deaflynx
6 years ago
9 changed files with 1044 additions and 1 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,51 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-edge-instances-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}"> |
||||
|
<div fxFlex fxLayout="column" class="tb-absolute-fill"> |
||||
|
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<button mat-button mat-icon-button |
||||
|
matTooltip="{{ 'action.search' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>search</mat-icon> |
||||
|
</button> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label> </mat-label> |
||||
|
<input #searchInput matInput |
||||
|
[(ngModel)]="textSearch" |
||||
|
placeholder="{{ 'entity.search' | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<button mat-button mat-icon-button (click)="exitFilterMode()" |
||||
|
matTooltip="{{ 'action.close' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<div fxFlex class="tb-edges-nav-tree-panel"> |
||||
|
<tb-nav-tree |
||||
|
[loadNodes]="loadNodes" |
||||
|
[onNodeSelected]="onNodeSelected" |
||||
|
[onNodesInserted]="onNodesInserted" |
||||
|
[editCallbacks]="nodeEditCallbacks" |
||||
|
enableSearch="true" |
||||
|
[searchCallback]="searchCallback" |
||||
|
></tb-nav-tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,121 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 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-context(.tb-has-timewindow) { |
||||
|
.tb-edge-instances-overview { |
||||
|
mat-toolbar { |
||||
|
height: 60px; |
||||
|
max-height: 60px; |
||||
|
.mat-toolbar-tools { |
||||
|
height: 60px; |
||||
|
max-height: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host { |
||||
|
.tb-edge-instances-overview { |
||||
|
mat-toolbar.mat-table-toolbar:not([color="primary"]) { |
||||
|
background: transparent; |
||||
|
} |
||||
|
mat-toolbar { |
||||
|
min-height: 39px; |
||||
|
max-height: 39px; |
||||
|
.mat-toolbar-tools { |
||||
|
min-height: 39px; |
||||
|
max-height: 39px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-edges-nav-tree-panel { |
||||
|
overflow-x: auto; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tb-nav-tree-container { |
||||
|
&.jstree-proton { |
||||
|
.jstree-anchor { |
||||
|
div.node-icon { |
||||
|
display: inline-block; |
||||
|
width: 22px; |
||||
|
height: 22px; |
||||
|
margin-right: 2px; |
||||
|
margin-bottom: 2px; |
||||
|
background-color: transparent; |
||||
|
background-repeat: no-repeat; |
||||
|
background-attachment: scroll; |
||||
|
background-position: center center; |
||||
|
background-size: 18px 18px; |
||||
|
} |
||||
|
|
||||
|
mat-icon.node-icon { |
||||
|
width: 22px; |
||||
|
min-width: 22px; |
||||
|
height: 22px; |
||||
|
min-height: 22px; |
||||
|
margin-right: 2px; |
||||
|
margin-bottom: 2px; |
||||
|
color: inherit; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 18px; |
||||
|
line-height: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.jstree-hovered:not(.jstree-clicked), |
||||
|
&.jstree-disabled { |
||||
|
div.node-icon { |
||||
|
opacity: .5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.tb-nav-tree-container { |
||||
|
&.jstree-proton-responsive { |
||||
|
.jstree-anchor { |
||||
|
div.node-icon { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin: 0; |
||||
|
background-size: 24px 24px; |
||||
|
} |
||||
|
|
||||
|
mat-icon.node-icon { |
||||
|
width: 40px; |
||||
|
min-width: 40px; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
margin: 0; |
||||
|
|
||||
|
&.material-icons { |
||||
|
font-size: 24px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,554 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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, Component, ElementRef, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { WidgetAction, WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { DatasourceData, DatasourceType, WidgetConfig, widgetType } from '@shared/models/widget.models'; |
||||
|
import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import cssjs from '@core/css/css'; |
||||
|
import { fromEvent } from 'rxjs'; |
||||
|
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'; |
||||
|
import { constructTableCssString } from '@home/components/widget/lib/table-widget.models'; |
||||
|
import { Overlay } from '@angular/cdk/overlay'; |
||||
|
import { |
||||
|
LoadNodesCallback, |
||||
|
NavTreeEditCallbacks, NodesCallback, |
||||
|
NodeSearchCallback, |
||||
|
NodeSelectedCallback, |
||||
|
NodesInsertedCallback |
||||
|
} from '@shared/components/nav-tree.component'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { deepClone, hashCode } from '@core/utils'; |
||||
|
import { |
||||
|
defaultNodeIconFunction, |
||||
|
defaultNodeOpenedFunction, |
||||
|
defaultNodeRelationQueryFunction, |
||||
|
defaultNodesSortFunction, |
||||
|
EdgeGroupsNodeData, |
||||
|
edgeGroupsNodeText, |
||||
|
edgeGroupsTypes, |
||||
|
EdgeNodeData, |
||||
|
edgeNodeText, |
||||
|
EdgeInstancesOverviewNode, |
||||
|
EdgeInstancesOverviewWidgetSettings, |
||||
|
HierarchyNavTreeNode, |
||||
|
HierarchyNodeContext, |
||||
|
HierarchyNodeDatasource, |
||||
|
iconUrlHtml, |
||||
|
loadNodeCtxFunction, |
||||
|
materialIconHtml, |
||||
|
NodeDisabledFunction, |
||||
|
NodeHasChildrenFunction, |
||||
|
NodeIconFunction, |
||||
|
NodeOpenedFunction, |
||||
|
NodeRelationQueryFunction, |
||||
|
NodesSortFunction, |
||||
|
NodeTextFunction |
||||
|
} from '@home/components/widget/lib/edge-instances-overview-widget.models'; |
||||
|
import { EdgeService } from "@core/http/edge.service"; |
||||
|
import { PageLink } from "@shared/models/page/page-link"; |
||||
|
import { Edge, EdgeInfo } from "@shared/models/edge.models"; |
||||
|
import { TranslateService } from "@ngx-translate/core"; |
||||
|
import { EntityService } from "@core/http/entity.service"; |
||||
|
import { Direction, SortOrder } from "@shared/models/page/sort-order"; |
||||
|
import { EntityRelationsQuery } from "@shared/models/relation.models"; |
||||
|
import { EntityFilter } from "@shared/models/query/query.models"; |
||||
|
import { AliasFilterType, RelationsQueryFilter } from "@shared/models/alias.models"; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-edge-instances-overview-widget', |
||||
|
templateUrl: './edge-instances-overview-widget.component.html', |
||||
|
styleUrls: ['./edge-instances-overview-widget.component.scss'] |
||||
|
}) |
||||
|
export class EdgeInstancesOverviewWidgetComponent extends PageComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@ViewChild('searchInput') searchInputField: ElementRef; |
||||
|
|
||||
|
public toastTargetId = 'edge-instances-overview-' + this.utils.guid(); |
||||
|
|
||||
|
public textSearchMode = false; |
||||
|
public textSearch = null; |
||||
|
|
||||
|
public nodeEditCallbacks: NavTreeEditCallbacks = {}; |
||||
|
|
||||
|
private settings: EdgeInstancesOverviewWidgetSettings; |
||||
|
private widgetConfig: WidgetConfig; |
||||
|
private subscription: IWidgetSubscription; |
||||
|
private datasources: Array<HierarchyNodeDatasource>; |
||||
|
private data: Array<Array<DatasourceData>>; |
||||
|
|
||||
|
private nodesMap: {[nodeId: string]: HierarchyNavTreeNode} = {}; |
||||
|
private pendingUpdateNodeTasks: {[nodeId: string]: () => void} = {}; |
||||
|
private nodeIdCounter = 0; |
||||
|
|
||||
|
private nodeRelationQueryFunction: NodeRelationQueryFunction; |
||||
|
private nodeIconFunction: NodeIconFunction; |
||||
|
private nodeTextFunction: NodeTextFunction; |
||||
|
private nodeDisabledFunction: NodeDisabledFunction; |
||||
|
private nodeOpenedFunction: NodeOpenedFunction; |
||||
|
private nodeHasChildrenFunction: NodeHasChildrenFunction; |
||||
|
private nodesSortFunction: NodesSortFunction; |
||||
|
|
||||
|
private edgeNodesMap: {[parentNodeId: string]: {[edgeId: string]: string}} = {}; |
||||
|
private edgeGroupsNodesMap: {[edgeNodeId: string]: {[groupType: string]: string}} = {}; |
||||
|
|
||||
|
|
||||
|
private searchAction: WidgetAction = { |
||||
|
name: 'action.search', |
||||
|
show: false, |
||||
|
icon: 'search', |
||||
|
onAction: () => { |
||||
|
this.enterFilterMode(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private elementRef: ElementRef, |
||||
|
private edgeService: EdgeService, |
||||
|
private entityService: EntityService, |
||||
|
private translateService: TranslateService, |
||||
|
private overlay: Overlay, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private utils: UtilsService) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.edgeInstancesOverviewWidget = this; |
||||
|
this.settings = this.ctx.settings; |
||||
|
this.widgetConfig = this.ctx.widgetConfig; |
||||
|
this.subscription = this.ctx.defaultSubscription; |
||||
|
this.datasources = this.subscription.datasources as Array<HierarchyNodeDatasource>; |
||||
|
this.data = this.subscription.dataPages[0].data; |
||||
|
this.initializeConfig(); |
||||
|
this.ctx.updateWidgetParams(); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
fromEvent(this.searchInputField.nativeElement, 'keyup') |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
distinctUntilChanged(), |
||||
|
tap(() => { |
||||
|
this.updateSearchNodes(); |
||||
|
}) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
this.updateNodeData(this.subscription.data); |
||||
|
} |
||||
|
|
||||
|
private initializeConfig() { |
||||
|
this.ctx.widgetActions = [this.searchAction]; |
||||
|
|
||||
|
const testNodeCtx: HierarchyNodeContext = { |
||||
|
entity: { |
||||
|
id: { |
||||
|
entityType: EntityType.DEVICE, |
||||
|
id: '123' |
||||
|
}, |
||||
|
name: 'TEST DEV1' |
||||
|
}, |
||||
|
data: {}, |
||||
|
level: 2 |
||||
|
}; |
||||
|
const parentNodeCtx = deepClone(testNodeCtx); |
||||
|
parentNodeCtx.level = 1; |
||||
|
testNodeCtx.parentNodeCtx = parentNodeCtx; |
||||
|
|
||||
|
this.nodeRelationQueryFunction = loadNodeCtxFunction(this.settings.nodeRelationQueryFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeIconFunction = loadNodeCtxFunction(this.settings.nodeIconFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeTextFunction = loadNodeCtxFunction(this.settings.nodeTextFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeDisabledFunction = loadNodeCtxFunction(this.settings.nodeDisabledFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeOpenedFunction = loadNodeCtxFunction(this.settings.nodeOpenedFunction, 'nodeCtx', testNodeCtx); |
||||
|
this.nodeHasChildrenFunction = loadNodeCtxFunction(this.settings.nodeHasChildrenFunction, 'nodeCtx', testNodeCtx); |
||||
|
|
||||
|
const testNodeCtx2 = deepClone(testNodeCtx); |
||||
|
testNodeCtx2.entity.name = 'TEST DEV2'; |
||||
|
|
||||
|
this.nodesSortFunction = loadNodeCtxFunction(this.settings.nodesSortFunction, 'nodeCtx1,nodeCtx2', testNodeCtx, testNodeCtx2); |
||||
|
|
||||
|
this.nodeRelationQueryFunction = this.nodeRelationQueryFunction || defaultNodeRelationQueryFunction; |
||||
|
this.nodeIconFunction = this.nodeIconFunction || defaultNodeIconFunction; |
||||
|
this.nodeTextFunction = this.nodeTextFunction || ((nodeCtx) => nodeCtx.entity.name); |
||||
|
this.nodeDisabledFunction = this.nodeDisabledFunction || (() => false); |
||||
|
this.nodeOpenedFunction = this.nodeOpenedFunction || defaultNodeOpenedFunction; |
||||
|
this.nodeHasChildrenFunction = this.nodeHasChildrenFunction || (() => true); |
||||
|
this.nodesSortFunction = this.nodesSortFunction || defaultNodesSortFunction; |
||||
|
|
||||
|
const cssString = constructTableCssString(this.widgetConfig); |
||||
|
const cssParser = new cssjs(); |
||||
|
cssParser.testMode = false; |
||||
|
const namespace = 'edges-instances-overview-' + hashCode(cssString); |
||||
|
cssParser.cssPreviewNamespace = namespace; |
||||
|
cssParser.createStyleElement(namespace, cssString); |
||||
|
$(this.elementRef.nativeElement).addClass(namespace); |
||||
|
} |
||||
|
|
||||
|
private enterFilterMode() { |
||||
|
this.textSearchMode = true; |
||||
|
this.textSearch = ''; |
||||
|
this.ctx.hideTitlePanel = true; |
||||
|
this.ctx.detectChanges(true); |
||||
|
setTimeout(() => { |
||||
|
this.searchInputField.nativeElement.focus(); |
||||
|
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
||||
|
}, 10); |
||||
|
} |
||||
|
|
||||
|
exitFilterMode() { |
||||
|
this.textSearchMode = false; |
||||
|
this.textSearch = null; |
||||
|
this.updateSearchNodes(); |
||||
|
this.ctx.hideTitlePanel = false; |
||||
|
this.ctx.detectChanges(true); |
||||
|
} |
||||
|
|
||||
|
private updateSearchNodes() { |
||||
|
if (this.textSearch != null) { |
||||
|
this.nodeEditCallbacks.search(this.textSearch); |
||||
|
} else { |
||||
|
this.nodeEditCallbacks.clearSearch(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateNodeData(subscriptionData: Array<DatasourceData>) { |
||||
|
const affectedNodes: string[] = []; |
||||
|
if (subscriptionData) { |
||||
|
subscriptionData.forEach((datasourceData) => { |
||||
|
const datasource = datasourceData.datasource as HierarchyNodeDatasource; |
||||
|
if (datasource.nodeId) { |
||||
|
const node = this.nodesMap[datasource.nodeId]; |
||||
|
const key = datasourceData.dataKey.label; |
||||
|
let value; |
||||
|
if (datasourceData.data && datasourceData.data.length) { |
||||
|
value = datasourceData.data[0][1]; |
||||
|
} |
||||
|
if (node.data.nodeCtx.data[key] !== value) { |
||||
|
if (affectedNodes.indexOf(datasource.nodeId) === -1) { |
||||
|
affectedNodes.push(datasource.nodeId); |
||||
|
} |
||||
|
node.data.nodeCtx.data[key] = value; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
affectedNodes.forEach((nodeId) => { |
||||
|
const node: HierarchyNavTreeNode = this.nodeEditCallbacks.getNode(nodeId); |
||||
|
if (node) { |
||||
|
this.updateNodeStyle(this.nodesMap[nodeId]); |
||||
|
} else { |
||||
|
this.pendingUpdateNodeTasks[nodeId] = () => { |
||||
|
this.updateNodeStyle(this.nodesMap[nodeId]); |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public loadNodes: LoadNodesCallback = (node, cb) => { |
||||
|
if (node.id === '#') { |
||||
|
const sortOrder: SortOrder = { property: 'name', direction: Direction.ASC }; |
||||
|
const pageLink = new PageLink(100, 0, null, sortOrder); |
||||
|
this.edgeService.getTenantEdgeInfos(pageLink).subscribe( |
||||
|
(edges) => { |
||||
|
cb(this.edgesToNodes(node.id, edges.data)) |
||||
|
}); |
||||
|
} else if (node.data.type === 'edge') { |
||||
|
const edge = node.data.entity; |
||||
|
cb(this.loadNodesForEdge(node.id, edge)); |
||||
|
} else if (node.data.type === 'edgeGroups') { |
||||
|
const pageLink = new PageLink(100); |
||||
|
this.entityService.getAssignedToEdgeEntitiesByType(node, pageLink).subscribe( |
||||
|
(entities) => { |
||||
|
if (entities.data.length > 0) { |
||||
|
cb(this.edgesToNodes(node.id, entities.data)); |
||||
|
} else { |
||||
|
cb([]); |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private loadNodesForEdge(parentNodeId: string, edge: EdgeInfo): EdgeInstancesOverviewNode[] { |
||||
|
const nodes: EdgeInstancesOverviewNode[] = []; |
||||
|
const nodesMap = {}; |
||||
|
this.edgeGroupsNodesMap[parentNodeId] = nodesMap; |
||||
|
edgeGroupsTypes.forEach((entityType) => { |
||||
|
const node: EdgeInstancesOverviewNode = { |
||||
|
id: (++this.nodeIdCounter)+'', |
||||
|
icon: false, |
||||
|
text: edgeGroupsNodeText(this.translateService, entityType), |
||||
|
children: true, |
||||
|
data: { |
||||
|
type: 'edgeGroups', |
||||
|
entityType, |
||||
|
edge, |
||||
|
internalId: edge.id.id + '_' + entityType |
||||
|
} as EdgeGroupsNodeData |
||||
|
}; |
||||
|
nodes.push(node); |
||||
|
nodesMap[entityType] = node.id; |
||||
|
}); |
||||
|
return nodes; |
||||
|
} |
||||
|
|
||||
|
private createEdgeNode(parentNodeId: string, edge: Edge): EdgeInstancesOverviewNode { |
||||
|
let nodesMap = this.edgeNodesMap[parentNodeId]; |
||||
|
if (!nodesMap) { |
||||
|
nodesMap = {}; |
||||
|
this.edgeNodesMap[parentNodeId] = nodesMap; |
||||
|
} |
||||
|
const node: EdgeInstancesOverviewNode = { |
||||
|
id: (++this.nodeIdCounter)+'', |
||||
|
icon: false, |
||||
|
text: edgeNodeText(edge), |
||||
|
children: parentNodeId === '#', |
||||
|
state: { |
||||
|
disabled: false |
||||
|
}, |
||||
|
data: { |
||||
|
type: 'edge', |
||||
|
entity: edge, |
||||
|
internalId: edge.id.id |
||||
|
} as EdgeNodeData |
||||
|
}; |
||||
|
nodesMap[edge.id.id] = node.id; |
||||
|
return node; |
||||
|
} |
||||
|
|
||||
|
private edgesToNodes(parentNodeId: string, edges: Array<Edge>): EdgeInstancesOverviewNode[] { |
||||
|
const nodes: EdgeInstancesOverviewNode[] = []; |
||||
|
this.edgeNodesMap[parentNodeId] = {}; |
||||
|
if (edges) { |
||||
|
edges.forEach((edge) => { |
||||
|
const node = this.createEdgeNode(parentNodeId, edge); |
||||
|
nodes.push(node); |
||||
|
}); |
||||
|
} |
||||
|
return nodes; |
||||
|
} |
||||
|
|
||||
|
public onNodeSelected: NodeSelectedCallback = (node, event) => { |
||||
|
let nodeId; |
||||
|
if (!node) { |
||||
|
nodeId = -1; |
||||
|
} else { |
||||
|
nodeId = node.id; |
||||
|
} |
||||
|
if (nodeId !== -1) { |
||||
|
const selectedNode = this.nodesMap[nodeId]; |
||||
|
if (selectedNode) { |
||||
|
const descriptors = this.ctx.actionsApi.getActionDescriptors('nodeSelected'); |
||||
|
if (descriptors.length) { |
||||
|
const entity = selectedNode.data.nodeCtx.entity; |
||||
|
this.ctx.actionsApi.handleWidgetAction(event, descriptors[0], entity.id, entity.name, { nodeCtx: selectedNode.data.nodeCtx }); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onNodesInserted: NodesInsertedCallback = (nodes) => { |
||||
|
if (nodes) { |
||||
|
nodes.forEach((nodeId) => { |
||||
|
const task = this.pendingUpdateNodeTasks[nodeId]; |
||||
|
if (task) { |
||||
|
task(); |
||||
|
delete this.pendingUpdateNodeTasks[nodeId]; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public searchCallback: NodeSearchCallback = (searchText, node) => { |
||||
|
const theNode = this.nodesMap[node.id]; |
||||
|
if (theNode && theNode.data.searchText) { |
||||
|
return theNode.data.searchText.includes(searchText.toLowerCase()); |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
private updateNodeStyle(node: HierarchyNavTreeNode) { |
||||
|
const newText = this.prepareNodeText(node); |
||||
|
if (node.text !== newText) { |
||||
|
node.text = newText; |
||||
|
this.nodeEditCallbacks.updateNode(node.id, node.text); |
||||
|
} |
||||
|
const newDisabled = this.nodeDisabledFunction(node.data.nodeCtx); |
||||
|
if (node.state.disabled !== newDisabled) { |
||||
|
node.state.disabled = newDisabled; |
||||
|
if (node.state.disabled) { |
||||
|
this.nodeEditCallbacks.disableNode(node.id); |
||||
|
} else { |
||||
|
this.nodeEditCallbacks.enableNode(node.id); |
||||
|
} |
||||
|
} |
||||
|
const newHasChildren = this.nodeHasChildrenFunction(node.data.nodeCtx); |
||||
|
if (node.children !== newHasChildren) { |
||||
|
node.children = newHasChildren; |
||||
|
this.nodeEditCallbacks.setNodeHasChildren(node.id, node.children); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private prepareNodes(nodes: HierarchyNavTreeNode[]): HierarchyNavTreeNode[] { |
||||
|
nodes = nodes.filter((node) => node !== null); |
||||
|
nodes.sort((node1, node2) => this.nodesSortFunction(node1.data.nodeCtx, node2.data.nodeCtx)); |
||||
|
return nodes; |
||||
|
} |
||||
|
|
||||
|
private prepareNodeText(node: HierarchyNavTreeNode): string { |
||||
|
const nodeIcon = this.prepareNodeIcon(node.data.nodeCtx); |
||||
|
const nodeText = this.nodeTextFunction(node.data.nodeCtx); |
||||
|
node.data.searchText = nodeText ? nodeText.replace(/<[^>]+>/g, '').toLowerCase() : ''; |
||||
|
return nodeIcon + nodeText; |
||||
|
} |
||||
|
|
||||
|
private prepareNodeIcon(nodeCtx: HierarchyNodeContext): string { |
||||
|
let iconInfo = this.nodeIconFunction(nodeCtx); |
||||
|
if (iconInfo) { |
||||
|
if (iconInfo === 'default') { |
||||
|
iconInfo = defaultNodeIconFunction(nodeCtx); |
||||
|
} |
||||
|
if (iconInfo && iconInfo !== 'default' && (iconInfo.iconUrl || iconInfo.materialIcon)) { |
||||
|
if (iconInfo.materialIcon) { |
||||
|
return materialIconHtml(iconInfo.materialIcon); |
||||
|
} else { |
||||
|
return iconUrlHtml(iconInfo.iconUrl); |
||||
|
} |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private datasourceToNode(datasource: HierarchyNodeDatasource, |
||||
|
data: DatasourceData[], |
||||
|
parentNodeCtx?: HierarchyNodeContext): HierarchyNavTreeNode { |
||||
|
const node: HierarchyNavTreeNode = { |
||||
|
id: (++this.nodeIdCounter) + '' |
||||
|
}; |
||||
|
this.nodesMap[node.id] = node; |
||||
|
datasource.nodeId = node.id; |
||||
|
node.icon = false; |
||||
|
const nodeCtx: HierarchyNodeContext = { |
||||
|
parentNodeCtx, |
||||
|
entity: { |
||||
|
id: { |
||||
|
id: datasource.entityId, |
||||
|
entityType: datasource.entityType |
||||
|
}, |
||||
|
name: datasource.entityName, |
||||
|
label: datasource.entityLabel ? datasource.entityLabel : datasource.entityName |
||||
|
}, |
||||
|
data: {} |
||||
|
}; |
||||
|
datasource.dataKeys.forEach((dataKey, index) => { |
||||
|
const keyData = data[index].data; |
||||
|
if (keyData && keyData.length && keyData[0].length > 1) { |
||||
|
nodeCtx.data[dataKey.label] = keyData[0][1]; |
||||
|
} else { |
||||
|
nodeCtx.data[dataKey.label] = ''; |
||||
|
} |
||||
|
}); |
||||
|
nodeCtx.level = parentNodeCtx ? parentNodeCtx.level + 1 : 1; |
||||
|
node.data = { |
||||
|
datasource, |
||||
|
nodeCtx |
||||
|
}; |
||||
|
node.state = { |
||||
|
disabled: this.nodeDisabledFunction(node.data.nodeCtx), |
||||
|
opened: this.nodeOpenedFunction(node.data.nodeCtx) |
||||
|
}; |
||||
|
node.text = this.prepareNodeText(node); |
||||
|
node.children = this.nodeHasChildrenFunction(node.data.nodeCtx); |
||||
|
return node; |
||||
|
} |
||||
|
|
||||
|
private loadChildren(parentNode: HierarchyNavTreeNode, datasource: HierarchyNodeDatasource, childrenNodesLoadCb: NodesCallback) { |
||||
|
const nodeCtx = parentNode.data.nodeCtx; |
||||
|
nodeCtx.childrenNodesLoaded = false; |
||||
|
const entityFilter = this.prepareNodeRelationsQueryFilter(nodeCtx); |
||||
|
const childrenDatasource = { |
||||
|
dataKeys: datasource.dataKeys, |
||||
|
type: DatasourceType.entity, |
||||
|
filterId: datasource.filterId, |
||||
|
entityFilter |
||||
|
} as HierarchyNodeDatasource; |
||||
|
const subscriptionOptions: WidgetSubscriptionOptions = { |
||||
|
type: widgetType.latest, |
||||
|
datasources: [childrenDatasource], |
||||
|
callbacks: { |
||||
|
onSubscriptionMessage: (subscription, message) => { |
||||
|
this.ctx.showToast(message.severity, message.message, undefined, |
||||
|
'bottom', 'left', this.toastTargetId); |
||||
|
}, |
||||
|
onInitialPageDataChanged: (subscription) => { |
||||
|
this.ctx.subscriptionApi.removeSubscription(subscription.id); |
||||
|
this.nodeEditCallbacks.refreshNode(parentNode.id); |
||||
|
}, |
||||
|
onDataUpdated: subscription => { |
||||
|
if (nodeCtx.childrenNodesLoaded) { |
||||
|
this.updateNodeData(subscription.data); |
||||
|
} else { |
||||
|
const datasourcesPageData = subscription.datasourcePages[0]; |
||||
|
const dataPageData = subscription.dataPages[0]; |
||||
|
const childNodes: HierarchyNavTreeNode[] = []; |
||||
|
datasourcesPageData.data.forEach((childDatasource, index) => { |
||||
|
childNodes.push(this.datasourceToNode(childDatasource as HierarchyNodeDatasource, dataPageData.data[index])); |
||||
|
}); |
||||
|
nodeCtx.childrenNodesLoaded = true; |
||||
|
childrenNodesLoadCb(this.prepareNodes(childNodes)); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
this.ctx.subscriptionApi.createSubscription(subscriptionOptions, true); |
||||
|
} |
||||
|
|
||||
|
private prepareNodeRelationQuery(nodeCtx: HierarchyNodeContext): EntityRelationsQuery { |
||||
|
let relationQuery = this.nodeRelationQueryFunction(nodeCtx); |
||||
|
if (relationQuery && relationQuery === 'default') { |
||||
|
relationQuery = defaultNodeRelationQueryFunction(nodeCtx); |
||||
|
} |
||||
|
return relationQuery as EntityRelationsQuery; |
||||
|
} |
||||
|
|
||||
|
private prepareNodeRelationsQueryFilter(nodeCtx: HierarchyNodeContext): EntityFilter { |
||||
|
const relationQuery = this.prepareNodeRelationQuery(nodeCtx); |
||||
|
return { |
||||
|
rootEntity: { |
||||
|
id: relationQuery.parameters.rootId, |
||||
|
entityType: relationQuery.parameters.rootType |
||||
|
}, |
||||
|
direction: relationQuery.parameters.direction, |
||||
|
filters: relationQuery.filters, |
||||
|
maxLevel: relationQuery.parameters.maxLevel, |
||||
|
fetchLastLevelOnly: relationQuery.parameters.fetchLastLevelOnly, |
||||
|
type: AliasFilterType.relationsQuery |
||||
|
} as RelationsQueryFilter; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,260 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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 { BaseData } from '@shared/models/base-data'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { NavTreeNode } from '@shared/components/nav-tree.component'; |
||||
|
import { Datasource } from '@shared/models/widget.models'; |
||||
|
import { isDefined, isUndefined } from '@core/utils'; |
||||
|
import { EntityRelationsQuery, EntitySearchDirection, RelationTypeGroup } from '@shared/models/relation.models'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { Edge } from "@shared/models/edge.models"; |
||||
|
import { TranslateService } from "@ngx-translate/core"; |
||||
|
|
||||
|
export interface EdgeInstancesOverviewWidgetSettings { |
||||
|
nodeRelationQueryFunction: string; |
||||
|
nodeHasChildrenFunction: string; |
||||
|
nodeOpenedFunction: string; |
||||
|
nodeDisabledFunction: string; |
||||
|
nodeIconFunction: string; |
||||
|
nodeTextFunction: string; |
||||
|
nodesSortFunction: string; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeContext { |
||||
|
parentNodeCtx?: HierarchyNodeContext; |
||||
|
entity: BaseData<EntityId>; |
||||
|
childrenNodesLoaded?: boolean; |
||||
|
level?: number; |
||||
|
data: {[key: string]: any}; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNavTreeNode extends NavTreeNode { |
||||
|
data?: { |
||||
|
datasource: HierarchyNodeDatasource; |
||||
|
nodeCtx: HierarchyNodeContext; |
||||
|
searchText?: string; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeDatasource extends Datasource { |
||||
|
nodeId: string; |
||||
|
} |
||||
|
|
||||
|
export interface HierarchyNodeIconInfo { |
||||
|
iconUrl?: string; |
||||
|
materialIcon?: string; |
||||
|
} |
||||
|
|
||||
|
export type NodeRelationQueryFunction = (nodeCtx: HierarchyNodeContext) => EntityRelationsQuery | 'default'; |
||||
|
export type NodeTextFunction = (nodeCtx: HierarchyNodeContext) => string; |
||||
|
export type NodeDisabledFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodeIconFunction = (nodeCtx: HierarchyNodeContext) => HierarchyNodeIconInfo | 'default'; |
||||
|
export type NodeOpenedFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodeHasChildrenFunction = (nodeCtx: HierarchyNodeContext) => boolean; |
||||
|
export type NodesSortFunction = (nodeCtx1: HierarchyNodeContext, nodeCtx2: HierarchyNodeContext) => number; |
||||
|
|
||||
|
export function loadNodeCtxFunction<F extends (...args: any[]) => any>(functionBody: string, argNames: string, ...args: any[]): F { |
||||
|
let nodeCtxFunction: F = null; |
||||
|
if (isDefined(functionBody) && functionBody.length) { |
||||
|
try { |
||||
|
nodeCtxFunction = new Function(argNames, functionBody) as F; |
||||
|
const res = nodeCtxFunction.apply(null, args); |
||||
|
if (isUndefined(res)) { |
||||
|
nodeCtxFunction = null; |
||||
|
} |
||||
|
} catch (e) { |
||||
|
nodeCtxFunction = null; |
||||
|
} |
||||
|
} |
||||
|
return nodeCtxFunction; |
||||
|
} |
||||
|
|
||||
|
export function materialIconHtml(materialIcon: string): string { |
||||
|
return '<mat-icon class="node-icon material-icons" role="img" aria-hidden="false">' + materialIcon + '</mat-icon>'; |
||||
|
} |
||||
|
|
||||
|
export function iconUrlHtml(iconUrl: string): string { |
||||
|
return '<div class="node-icon" style="background-image: url(' + iconUrl + ');"> </div>'; |
||||
|
} |
||||
|
|
||||
|
export function edgeGroupsNodeText(translate: TranslateService, entityType: EntityType): string { |
||||
|
const nodeIcon = materialIconByEntityType(entityType); |
||||
|
const nodeText = textForEdgeGroupsType(translate, entityType); |
||||
|
return nodeIcon + nodeText; |
||||
|
} |
||||
|
|
||||
|
export function edgeNodeText(edge: Edge): string { |
||||
|
const nodeIcon = materialIconByEntityType(edge.id.entityType); |
||||
|
const nodeText = edge.name; |
||||
|
return nodeIcon + nodeText; |
||||
|
} |
||||
|
|
||||
|
export function materialIconByEntityType(entityType: EntityType): string { |
||||
|
let materialIcon = 'insert_drive_file'; |
||||
|
switch (entityType) { |
||||
|
case EntityType.DEVICE: |
||||
|
materialIcon = 'devices_other'; |
||||
|
break; |
||||
|
case EntityType.ASSET: |
||||
|
materialIcon = 'domain'; |
||||
|
break; |
||||
|
case EntityType.CUSTOMER: |
||||
|
materialIcon = 'supervisor_account'; |
||||
|
break; |
||||
|
case EntityType.USER: |
||||
|
materialIcon = 'account_circle'; |
||||
|
break; |
||||
|
case EntityType.DASHBOARD: |
||||
|
materialIcon = 'dashboards'; |
||||
|
break; |
||||
|
case EntityType.ENTITY_VIEW: |
||||
|
materialIcon = 'view_quilt'; |
||||
|
break; |
||||
|
case EntityType.RULE_CHAIN: |
||||
|
materialIcon = 'settings_ethernet'; |
||||
|
break; |
||||
|
case EntityType.EDGE: |
||||
|
materialIcon = 'router'; |
||||
|
break; |
||||
|
} |
||||
|
return '<mat-icon class="node-icon material-icons" role="img" aria-hidden="false">' + materialIcon + '</mat-icon>'; |
||||
|
} |
||||
|
|
||||
|
export function textForEdgeGroupsType(translate: TranslateService, entityType: EntityType): string { |
||||
|
let textForEdgeGroupsType: string = ''; |
||||
|
switch (entityType) { |
||||
|
case EntityType.DEVICE: |
||||
|
textForEdgeGroupsType = 'device.devices'; |
||||
|
break; |
||||
|
case EntityType.ASSET: |
||||
|
textForEdgeGroupsType = 'asset.assets'; |
||||
|
break; |
||||
|
case EntityType.DASHBOARD: |
||||
|
textForEdgeGroupsType = 'dashboard.dashboards'; |
||||
|
break; |
||||
|
case EntityType.ENTITY_VIEW: |
||||
|
textForEdgeGroupsType = 'entity-view.entity-views'; |
||||
|
break; |
||||
|
case EntityType.RULE_CHAIN: |
||||
|
textForEdgeGroupsType = 'rulechain.rulechains'; |
||||
|
break; |
||||
|
} |
||||
|
return translate.instant(textForEdgeGroupsType); |
||||
|
} |
||||
|
|
||||
|
export const defaultNodeRelationQueryFunction: NodeRelationQueryFunction = nodeCtx => { |
||||
|
const entity = nodeCtx.entity; |
||||
|
const query: EntityRelationsQuery = { |
||||
|
parameters: { |
||||
|
rootId: entity.id.id, |
||||
|
rootType: entity.id.entityType as EntityType, |
||||
|
direction: EntitySearchDirection.FROM, |
||||
|
relationTypeGroup: RelationTypeGroup.COMMON, |
||||
|
maxLevel: 1 |
||||
|
}, |
||||
|
filters: [ |
||||
|
{ |
||||
|
relationType: 'Contains', |
||||
|
entityTypes: [] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
return query; |
||||
|
}; |
||||
|
|
||||
|
export const edgeGroupsTypes: EntityType[] = [ |
||||
|
EntityType.ASSET, |
||||
|
EntityType.DEVICE, |
||||
|
EntityType.ENTITY_VIEW, |
||||
|
EntityType.DASHBOARD, |
||||
|
EntityType.RULE_CHAIN |
||||
|
] |
||||
|
|
||||
|
export const defaultNodeIconFunction: NodeIconFunction = nodeCtx => { |
||||
|
let materialIcon = 'insert_drive_file'; |
||||
|
const entity = nodeCtx.entity; |
||||
|
if (entity && entity.id && entity.id.entityType) { |
||||
|
switch (entity.id.entityType as EntityType | string) { |
||||
|
case 'function': |
||||
|
materialIcon = 'functions'; |
||||
|
break; |
||||
|
case EntityType.DEVICE: |
||||
|
materialIcon = 'devices_other'; |
||||
|
break; |
||||
|
case EntityType.ASSET: |
||||
|
materialIcon = 'domain'; |
||||
|
break; |
||||
|
case EntityType.TENANT: |
||||
|
materialIcon = 'supervisor_account'; |
||||
|
break; |
||||
|
case EntityType.CUSTOMER: |
||||
|
materialIcon = 'supervisor_account'; |
||||
|
break; |
||||
|
case EntityType.USER: |
||||
|
materialIcon = 'account_circle'; |
||||
|
break; |
||||
|
case EntityType.DASHBOARD: |
||||
|
materialIcon = 'dashboards'; |
||||
|
break; |
||||
|
case EntityType.ALARM: |
||||
|
materialIcon = 'notifications_active'; |
||||
|
break; |
||||
|
case EntityType.ENTITY_VIEW: |
||||
|
materialIcon = 'view_quilt'; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
materialIcon |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
export const defaultNodeOpenedFunction: NodeOpenedFunction = nodeCtx => { |
||||
|
return nodeCtx.level <= 4; |
||||
|
}; |
||||
|
|
||||
|
export const defaultNodesSortFunction: NodesSortFunction = (nodeCtx1, nodeCtx2) => { |
||||
|
let result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType); |
||||
|
if (result === 0) { |
||||
|
result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name); |
||||
|
} |
||||
|
return result; |
||||
|
}; |
||||
|
|
||||
|
export interface EdgeInstancesOverviewNode extends NavTreeNode { |
||||
|
data?: EdgeInstancesOverviewNodeData; |
||||
|
} |
||||
|
|
||||
|
export type EdgeInstancesOverviewNodeData = EdgeGroupsNodeData | EdgeNodeData; |
||||
|
|
||||
|
export interface EdgeGroupsNodeData extends BaseEdgeInstancesOverviewNodeData { |
||||
|
type: 'edgeGroups'; |
||||
|
entityType: EntityType; |
||||
|
edge: Edge; |
||||
|
} |
||||
|
|
||||
|
export interface EdgeNodeData extends BaseEdgeInstancesOverviewNodeData { |
||||
|
type: 'edge'; |
||||
|
entity: Edge; |
||||
|
} |
||||
|
|
||||
|
export interface BaseEdgeInstancesOverviewNodeData { |
||||
|
type: EdgeInstancesOverviewNodeType; |
||||
|
internalId: string; |
||||
|
} |
||||
|
|
||||
|
export type EdgeInstancesOverviewNodeType = 'edge' | 'edgeGroups'; |
||||
Loading…
Reference in new issue