Browse Source
Develop/2.6 edge Edges overview widget, languages update, hide sensitive info for customerspull/3957/head
VoBa
5 years ago
committed by
GitHub
GitHub
27 changed files with 728 additions and 154 deletions
@ -0,0 +1,25 @@ |
|||
{ |
|||
"widgetsBundle": { |
|||
"alias": "edge_widgets", |
|||
"title": "Edge widgets", |
|||
"image": null |
|||
}, |
|||
"widgetTypes": [ |
|||
{ |
|||
"alias": "edges_overview", |
|||
"name": "Edges Quick Overview", |
|||
"descriptor": { |
|||
"type": "latest", |
|||
"sizeX": 7.5, |
|||
"sizeY": 5, |
|||
"resources": [], |
|||
"templateHtml": "<tb-edges-overview-widget \n ctx=\"ctx\">\n</tb-edges-overview-widget>", |
|||
"templateCss": "", |
|||
"controllerScript": "self.onInit = function() {\n var scope = self.ctx.$scope;\n scope.ctx = self.ctx;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n dataKeysOptional: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'nodeSelected': {\n name: 'widget-action.node-selected',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", |
|||
"settingsSchema": "{}", |
|||
"dataKeySettingsSchema": "{}", |
|||
"defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{},\"title\":\"Edges Quick Overview\",\"showTitleIcon\":true,\"titleIcon\":\"router\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"widgetStyle\":{},\"actions\":{}}" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,240 @@ |
|||
/* |
|||
* 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 './edges-overview-widget.scss'; |
|||
|
|||
/* eslint-disable import/no-unresolved, import/default */ |
|||
import edgesOverviewWidgetTemplate from './edges-overview-widget.tpl.html'; |
|||
|
|||
/* eslint-enable import/no-unresolved, import/default */ |
|||
|
|||
export default angular.module('thingsboard.widgets.edgesOverviewWidget', []) |
|||
.directive('tbEdgesOverviewWidget', EdgesOverviewWidget) |
|||
.name; |
|||
/* eslint-disable no-unused-vars, no-undef */ |
|||
/*@ngInject*/ |
|||
function EdgesOverviewWidget() { |
|||
return { |
|||
restrict: "E", |
|||
scope: true, |
|||
bindToController: { |
|||
ctx: '=' |
|||
}, |
|||
controller: EdgesOverviewWidgetController, |
|||
controllerAs: 'vm', |
|||
templateUrl: edgesOverviewWidgetTemplate |
|||
}; |
|||
} |
|||
|
|||
/*@ngInject*/ |
|||
function EdgesOverviewWidgetController($scope, $translate, types, utils, entityService, edgeService, customerService, userService) { |
|||
var vm = this; |
|||
|
|||
vm.showData = true; |
|||
|
|||
vm.nodeIdCounter = 0; |
|||
|
|||
vm.entityNodesMap = {}; |
|||
vm.entityGroupsNodesMap = {}; |
|||
|
|||
vm.customerTitle = null; |
|||
vm.edgeIsDatasource = true; |
|||
|
|||
var edgeGroupsTypes = [ |
|||
types.entityType.asset, |
|||
types.entityType.device, |
|||
types.entityType.entityView, |
|||
types.entityType.dashboard, |
|||
types.entityType.rulechain |
|||
]; |
|||
|
|||
vm.onNodeSelected = onNodeSelected; |
|||
|
|||
$scope.$watch('vm.ctx', function() { |
|||
if (vm.ctx && vm.ctx.defaultSubscription) { |
|||
vm.settings = vm.ctx.settings; |
|||
vm.widgetConfig = vm.ctx.widgetConfig; |
|||
vm.subscription = vm.ctx.defaultSubscription; |
|||
vm.datasources = vm.subscription.datasources; |
|||
updateDatasources(); |
|||
} |
|||
}); |
|||
|
|||
function onNodeSelected(node, event) { |
|||
var nodeId; |
|||
if (!node) { |
|||
nodeId = -1; |
|||
} else { |
|||
nodeId = node.id; |
|||
} |
|||
if (nodeId !== -1) { |
|||
var selectedNode = vm.entityNodesMap[nodeId]; |
|||
if (selectedNode) { |
|||
var descriptors = vm.ctx.actionsApi.getActionDescriptors('nodeSelected'); |
|||
if (descriptors.length) { |
|||
var entity = selectedNode.data.nodeCtx.entity; |
|||
vm.ctx.actionsApi.handleWidgetAction(event, descriptors[0], entity.id, entity.name, { nodeCtx: selectedNode.data.nodeCtx }); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
function updateDatasources() { |
|||
vm.loadNodes = loadNodes; |
|||
} |
|||
|
|||
function loadNodes(node, cb) { |
|||
var datasource = vm.datasources[0]; |
|||
if (node.id === '#' && datasource) { |
|||
if (datasource.type === types.datasourceType.entity && datasource.entity && datasource.entity.id.entityType === types.entityType.edge) { |
|||
var selectedEdge = datasource.entity; |
|||
vm.customerTitle = getCustomerTitle(selectedEdge.id.id); |
|||
// vm.ctx.widgetTitle = selectedEdge.name;
|
|||
cb(loadNodesForEdge(selectedEdge.id.id, selectedEdge)); |
|||
} else if (datasource.type === types.datasourceType.function) { |
|||
cb(loadNodesForEdge(null, null)); |
|||
} else { |
|||
vm.edgeIsDatasource = false; |
|||
cb([]); |
|||
} |
|||
} else if (node.data && node.data.entity && node.data.entity.id.entityType === types.entityType.edge) { |
|||
var edgeId = node.data.entity.id.id; |
|||
var entityType = node.data.entityType; |
|||
var pageLink = {limit: 100}; |
|||
entityService.getAssignedToEdgeEntitiesByType(edgeId, entityType, pageLink).then( |
|||
(entities) => { |
|||
if (entities.data.length > 0) { |
|||
cb(entitiesToNodes(node.id, entities.data)); |
|||
} else { |
|||
cb([]); |
|||
} |
|||
} |
|||
); |
|||
} else { |
|||
cb([]); |
|||
} |
|||
} |
|||
|
|||
function entitiesToNodes(parentNodeId, entities) { |
|||
var nodes = []; |
|||
vm.entityNodesMap[parentNodeId] = {}; |
|||
if (entities) { |
|||
entities.forEach( |
|||
(entity) => { |
|||
var node = createEntityNode(parentNodeId, entity, entity.id.entityType); |
|||
nodes.push(node); |
|||
} |
|||
); |
|||
} |
|||
return nodes; |
|||
} |
|||
|
|||
function createEntityNode(parentNodeId, entity, entityType) { |
|||
var nodesMap = vm.entityNodesMap[parentNodeId]; |
|||
if (!nodesMap) { |
|||
nodesMap = {}; |
|||
vm.entityNodesMap[parentNodeId] = nodesMap; |
|||
} |
|||
var node = { |
|||
id: ++vm.nodeIdCounter, |
|||
icon: 'material-icons ' + iconForGroupType(entityType), |
|||
text: entity.name, |
|||
children: false, |
|||
data: { |
|||
entity, |
|||
internalId: entity.id.id |
|||
} |
|||
}; |
|||
nodesMap[entity.id.id] = node.id; |
|||
return node; |
|||
} |
|||
|
|||
function loadNodesForEdge(parentNodeId, entity) { |
|||
var nodes = []; |
|||
vm.entityGroupsNodesMap[parentNodeId] = {}; |
|||
var allowedGroupTypes = edgeGroupsTypes; |
|||
if (userService.getAuthority() === 'CUSTOMER_USER') { |
|||
allowedGroupTypes = edgeGroupsTypes.filter(type => type !== types.entityType.rulechain); |
|||
} |
|||
allowedGroupTypes.forEach( |
|||
(entityType) => { |
|||
var node = { |
|||
id: ++vm.nodeIdCounter, |
|||
icon: 'material-icons ' + iconForGroupType(entityType), |
|||
text: textForGroupType(entityType), |
|||
children: true, |
|||
data: { |
|||
entityType, |
|||
entity, |
|||
internalId: entity ? entity.id.id + '_' + entityType : utils.guid() |
|||
} |
|||
}; |
|||
nodes.push(node); |
|||
} |
|||
) |
|||
return nodes; |
|||
} |
|||
|
|||
function iconForGroupType(entityType) { |
|||
switch (entityType) { |
|||
case types.entityType.asset: |
|||
return 'tb-asset-group'; |
|||
case types.entityType.device: |
|||
return 'tb-device-group'; |
|||
case types.entityType.entityView: |
|||
return 'tb-entity-view-group'; |
|||
case types.entityType.dashboard: |
|||
return 'tb-dashboard-group'; |
|||
case types.entityType.rulechain: |
|||
return 'tb-rule-chain-group'; |
|||
} |
|||
return ''; |
|||
} |
|||
|
|||
function textForGroupType(entityType) { |
|||
switch (entityType) { |
|||
case types.entityType.asset: |
|||
return $translate.instant('asset.assets'); |
|||
case types.entityType.device: |
|||
return $translate.instant('device.devices'); |
|||
case types.entityType.entityView: |
|||
return $translate.instant('entity-view.entity-views'); |
|||
case types.entityType.rulechain: |
|||
return $translate.instant('rulechain.rulechains'); |
|||
case types.entityType.dashboard: |
|||
return $translate.instant('dashboard.dashboards'); |
|||
} |
|||
return ''; |
|||
} |
|||
|
|||
function getCustomerTitle(edgeId) { |
|||
edgeService.getEdge(edgeId, true).then( |
|||
function success(edge) { |
|||
if (edge.customerId.id !== types.id.nullUid) { |
|||
customerService.getCustomer(edge.customerId.id, { ignoreErrors: true }).then( |
|||
function success(customer) { |
|||
vm.customerTitle = $translate.instant('edge.assigned-to-customer-widget', { customerTitle: customer.title }); |
|||
}, |
|||
function fail() { |
|||
} |
|||
); |
|||
} |
|||
}, |
|||
function fail() { |
|||
} |
|||
) |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
.tb-edges-overview { |
|||
.mat-subheader { |
|||
padding: 15px; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
opacity: .5; |
|||
} |
|||
|
|||
.tb-entities-nav-tree-panel { |
|||
overflow-x: auto; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.tb-edges-overview { |
|||
.tb-entities-nav-tree-panel { |
|||
.tb-nav-tree-container { |
|||
&.jstree-proton-responsive { |
|||
.jstree-anchor { |
|||
div.node-icon { |
|||
width: 40px; |
|||
height: 40px; |
|||
margin: 0; |
|||
background-size: 24px 24px; |
|||
} |
|||
|
|||
md-icon.node-icon { |
|||
width: 40px; |
|||
min-width: 40px; |
|||
height: 40px; |
|||
min-height: 40px; |
|||
margin: 0; |
|||
|
|||
&.material-icons { /* stylelint-disable-line selector-max-class */ |
|||
font-size: 24px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
<!-- |
|||
|
|||
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-absolute-fill tb-edges-overview" layout="column"> |
|||
<div ng-show="vm.showData" flex class="tb-absolute-fill" layout="column"> |
|||
<span class="mat-subheader" ng-if="vm.customerTitle">{{ vm.customerTitle }}</span> |
|||
<span class="mat-subheader" ng-if="!vm.edgeIsDatasource" translate>edge.widget-datasource-error</span> |
|||
<div flex class="tb-entities-nav-tree-panel"> |
|||
<tb-nav-tree |
|||
on-node-selected="vm.onNodeSelected(node, event)" |
|||
load-nodes="vm.loadNodes" |
|||
></tb-nav-tree> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
Loading…
Reference in new issue