Edge Downlinks new tab implementation 2

6 years ago · a0e74d7205
13 changed files with 784 additions and 4 deletions
--- a/ui/src/app/edge/downlinks/edge-downlinks-content-dialog.controller.js
+++ b/ui/src/app/edge/downlinks/edge-downlinks-content-dialog.controller.js
@ -0,0 +1,92 @@
+/*
+ * 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 $ from 'jquery';
+import 'brace/ext/language_tools';
+import 'brace/ext/searchbox';
+import 'brace/mode/java';
+import 'brace/theme/github';
+import beautify from 'js-beautify';
+
+/* eslint-disable angular/angularelement */
+
+const js_beautify = beautify.js;
+
+/*@ngInject*/
+export default function EdgeDownlinksContentDialogController($mdDialog, types, content, contentType, title, showingCallback) {
+
+    var vm = this;
+
+    showingCallback.onShowing = function(scope, element) {
+        updateEditorSize(element);
+    }
+
+    vm.content = content;
+    vm.title = title;
+
+    var mode;
+    if (contentType) {
+        mode = types.contentType[contentType].code;
+        if (contentType == types.contentType.JSON.value && vm.content) {
+            vm.content = js_beautify(vm.content, {indent_size: 4});
+        }
+    } else {
+        mode = 'java';
+    }
+
+    vm.contentOptions = {
+        useWrapMode: false,
+        mode: mode,
+        showGutter: false,
+        showPrintMargin: false,
+        theme: 'github',
+        advanced: {
+            enableSnippets: false,
+            enableBasicAutocompletion: false,
+            enableLiveAutocompletion: false
+        },
+        onLoad: function (_ace) {
+            vm.editor = _ace;
+        }
+    };
+
+    function updateEditorSize(element) {
+        var newHeight = 400;
+        var newWidth = 600;
+        if (vm.content && vm.content.length > 0) {
+            var lines = vm.content.split('\n');
+            newHeight = 16 * lines.length + 16;
+            var maxLineLength = 0;
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i].replace(/\t/g, '    ').replace(/\n/g, '');
+                var lineLength = line.length;
+                maxLineLength = Math.max(maxLineLength, lineLength);
+            }
+            newWidth = 8 * maxLineLength + 16;
+        }
+        $('#tb-event-content', element).height(newHeight.toString() + "px")
+            .width(newWidth.toString() + "px");
+        vm.editor.resize();
+    }
+
+    vm.close = close;
+
+    function close () {
+        $mdDialog.hide();
+    }
+
+}
+
+/* eslint-enable angular/angularelement */
--- a/ui/src/app/edge/downlinks/edge-downlinks-header.directive.js
+++ b/ui/src/app/edge/downlinks/edge-downlinks-header.directive.js
@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+/* eslint-disable import/no-unresolved, import/default */
+
+import edgeDownlinksHeaderTemplate from './event-header-edge-event.tpl.html'
+
+/* eslint-enable import/no-unresolved, import/default */
+
+/*@ngInject*/
+export default function EventHeaderDirective2($compile, $templateCache, types) {
+
+    var linker = function (scope, element, attrs) {
+
+        var getTemplate = function(eventType) {
+            var template = '';
+            switch(eventType) {
+                case types.edgeDownlinks.value:
+                    template = edgeDownlinksHeaderTemplate;
+                    break;
+            }
+            return $templateCache.get(template);
+        }
+
+        scope.loadTemplate = function() {
+            element.html(getTemplate(attrs.eventType));
+            $compile(element.contents())(scope);
+        }
+
+        attrs.$observe('eventType', function() {
+            scope.loadTemplate();
+        });
+
+    }
+
+    return {
+        restrict: "A",
+        replace: false,
+        link: linker,
+        scope: false
+    };
+}
--- a/ui/src/app/edge/downlinks/edge-downlinks-row.directive.js
+++ b/ui/src/app/edge/downlinks/edge-downlinks-row.directive.js
@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+/* eslint-disable import/no-unresolved, import/default */
+
+import eventErrorDialogTemplate from './event-content-dialog.tpl.html';
+
+import edgeDownlinlsRowTemplate from './event-row-edge-event.tpl.html';
+
+/* eslint-enable import/no-unresolved, import/default */
+
+/*@ngInject*/
+export default function EventRowDirective2($compile, $templateCache, $mdDialog, $document, $translate,
+                                          types, utils, toast, entityService, ruleChainService) {
+
+    var linker = function (scope, element, attrs) {
+
+        var getTemplate = function(eventType) {
+            var template = '';
+            switch(eventType) {
+                case types.edgeDownlinks.value:
+                    template = edgeDownlinlsRowTemplate;
+                    break;
+            }
+            return $templateCache.get(template);
+        }
+
+        scope.loadTemplate = function() {
+            element.html(getTemplate(attrs.eventType));
+            $compile(element.contents())(scope);
+        }
+
+        attrs.$observe('eventType', function() {
+            scope.loadTemplate();
+        });
+
+        scope.types = types;
+
+        scope.event = attrs.event;
+
+        scope.showEdgeEntityContent = function($event, title, contentType) {
+            var onShowingCallback = {
+                onShowing: function(){}
+            }
+            if (!contentType) {
+                contentType = null;
+            }
+            var content = '';
+            switch(scope.event.type) {
+                case types.edgeEventType.relation:
+                    content = angular.toJson(scope.event.body);
+                    showDialog();
+                    break;
+                case types.edgeEventType.ruleChainMetaData:
+                    content = ruleChainService.getRuleChainMetaData(scope.event.entityId, {ignoreErrors: true}).then(
+                        function success(info) {
+                            showDialog();
+                            return angular.toJson(info);
+                        }, function fail() {
+                            showError();
+                        });
+                    break;
+                default:
+                    content = entityService.getEntity(scope.event.type, scope.event.entityId, {ignoreErrors: true}).then(
+                        function success(info) {
+                            showDialog();
+                            return angular.toJson(info);
+                        }, function fail() {
+                            showError();
+                        });
+                    break;
+            }
+            function showDialog() {
+                $mdDialog.show({
+                    controller: 'EventContentDialogController2',
+                    controllerAs: 'vm',
+                    templateUrl: eventErrorDialogTemplate,
+                    locals: {content: content, title: title, contentType: contentType, showingCallback: onShowingCallback},
+                    parent: angular.element($document[0].body),
+                    fullscreen: true,
+                    targetEvent: $event,
+                    multiple: true,
+                    onShowing: function(scope, element) {
+                        onShowingCallback.onShowing(scope, element);
+                    }
+                });
+            }
+            function showError() {
+                toast.showError($translate.instant('edge.load-entity-error'));
+            }
+        }
+
+        scope.checkEdgeEventType = function (type) {
+            return !(type === types.edgeEventType.widgetType ||
+                type === types.edgeEventType.adminSettings ||
+                type === types.edgeEventType.widgetsBundle );
+        }
+
+        scope.checkTooltip = function($event) {
+            var el = $event.target;
+            var $el = angular.element(el);
+            if(el.offsetWidth < el.scrollWidth && !$el.attr('title')){
+                $el.attr('title', $el.text());
+            }
+        }
+
+        $compile(element.contents())(scope);
+
+        scope.updateStatus = function(eventCreatedTime) {
+            var status;
+            if (eventCreatedTime < scope.queueStartTs) {
+                status = $translate.instant(types.edgeEventStatus.DEPLOYED.name);
+                scope.statusColor = types.edgeEventStatus.DEPLOYED.color;
+            } else {
+                status = $translate.instant(types.edgeEventStatus.PENDING.name);
+                scope.statusColor = types.edgeEventStatus.PENDING.color;
+            }
+            return status;
+        }
+    }
+
+    return {
+        restrict: "A",
+        replace: false,
+        link: linker,
+        scope: false
+    };
+}
--- a/ui/src/app/edge/downlinks/edge-downlinks-table.directive.js
+++ b/ui/src/app/edge/downlinks/edge-downlinks-table.directive.js
@ -0,0 +1,234 @@
+/*
+ * 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 './event.scss';
+
+/* eslint-disable import/no-unresolved, import/default */
+
+import edgeDownlinksTableTemplate from './edge-downlinks-table.tpl.html';
+
+/* eslint-enable import/no-unresolved, import/default */
+
+/*@ngInject*/
+export default function EdgeDownlinksDirective2($compile, $templateCache, $rootScope, $translate, types,
+                                            eventService, edgeService, attributeService) {
+
+    var linker = function (scope, element) {
+
+        var template = $templateCache.get(edgeDownlinksTableTemplate);
+
+        element.html(template);
+
+        scope.eventType = types.edgeDownlinks.value;
+
+        var pageSize = 20;
+        var startTime = 0;
+        var endTime = 0;
+
+        scope.timewindow = {
+            history: {
+                timewindowMs: 24 * 60 * 60 * 1000 // 1 day
+            }
+        }
+
+        scope.topIndex = 0;
+
+        scope.theEvents = {
+            getItemAtIndex: function (index) {
+                if (index > scope.events.data.length) {
+                    scope.theEvents.fetchMoreItems_(index);
+                    return null;
+                }
+                var item = scope.events.data[index];
+                if (item) {
+                    item.indexNumber = index + 1;
+                }
+                return item;
+            },
+
+            getLength: function () {
+                if (scope.events.hasNext) {
+                    return scope.events.data.length + scope.events.nextPageLink.limit;
+                } else {
+                    return scope.events.data.length;
+                }
+            },
+
+            fetchMoreItems_: function () {
+                if (scope.events.hasNext && !scope.events.pending) {
+                    if (scope.entityType && scope.entityId && scope.eventType && scope.tenantId) {
+                        scope.loadEdgeInfo();
+                        scope.events.pending = true;
+                        edgeService.getEdgeDownlinks(scope.entityId, scope.events.nextPageLink).then(
+                            function success(events) {
+                                scope.events.data = scope.events.data.concat(prepareEdgeEventData(events.data));
+                                scope.events.nextPageLink = events.nextPageLink;
+                                scope.events.hasNext = events.hasNext;
+                                if (scope.events.hasNext) {
+                                    scope.events.nextPageLink.limit = pageSize;
+                                }
+                                scope.events.pending = false;
+                            },
+                            function fail() {
+                                scope.events.hasNext = false;
+                                scope.events.pending = false;
+                            });
+                    } else {
+                        scope.events.hasNext = false;
+                    }
+                }
+            }
+        };
+
+        scope.$watch("entityId", function(newVal, prevVal) {
+            if (newVal && !angular.equals(newVal, prevVal)) {
+                scope.resetFilter();
+                scope.reload();
+            }
+        });
+
+        scope.$watch("timewindow", function(newVal, prevVal) {
+            if (newVal && !angular.equals(newVal, prevVal)) {
+                scope.reload();
+            }
+        }, true);
+
+        scope.resetFilter = function() {
+            scope.timewindow = {
+                history: {
+                    timewindowMs: 24 * 60 * 60 * 1000 // 1 day
+                }
+            };
+        }
+
+        scope.updateTimeWindowRange = function() {
+            if (scope.timewindow.history.timewindowMs) {
+                var currentTime = (new Date).getTime();
+                startTime = currentTime - scope.timewindow.history.timewindowMs;
+                endTime = currentTime;
+            } else {
+                startTime = scope.timewindow.history.fixedTimewindow.startTimeMs;
+                endTime = scope.timewindow.history.fixedTimewindow.endTimeMs;
+            }
+        }
+
+        scope.reload = function() {
+            scope.topIndex = 0;
+            scope.selected = [];
+            scope.updateTimeWindowRange();
+            scope.events = {
+                data: [],
+                nextPageLink: {
+                    limit: pageSize,
+                    startTime: startTime,
+                    endTime: endTime
+                },
+                hasNext: true,
+                pending: false
+            };
+            scope.theEvents.getItemAtIndex(pageSize);
+        }
+
+        scope.noData = function() {
+            return scope.events.data.length == 0 && !scope.events.hasNext;
+        }
+
+        scope.hasData = function() {
+            return scope.events.data.length > 0;
+        }
+
+        scope.loading = function() {
+            return $rootScope.loading;
+        }
+
+        scope.hasScroll = function() {
+            var repeatContainer = scope.repeatContainer[0];
+            if (repeatContainer) {
+                var scrollElement = repeatContainer.children[0];
+                if (scrollElement) {
+                    return scrollElement.scrollHeight > scrollElement.clientHeight;
+                }
+            }
+            return false;
+        }
+
+        scope.subscriptionId = null;
+
+        scope.loadEdgeInfo = function() {
+            attributeService.getEntityAttributesValues(
+                scope.entityType,
+                scope.entityId,
+                types.attributesScope.server.value,
+                types.edgeAttributeKeys.queueStartTs,
+                null).then(
+                    function success(attributes) {
+                        attributes.length > 0 ? scope.onEdgeAttributesUpdate(attributes) : scope.queueStartTs = 0;
+                    });
+            scope.checkSubscription();
+        }
+
+        scope.onEdgeAttributesUpdate = function(attributes) {
+            let edgeAttributes = attributes.reduce(function (map, attribute) {
+                map[attribute.key] = attribute;
+                return map;
+            }, {});
+            if (edgeAttributes.queueStartTs) {
+                scope.queueStartTs = edgeAttributes.queueStartTs.lastUpdateTs;
+            }
+        }
+
+        scope.checkSubscription = function() {
+            var newSubscriptionId = null;
+            if (scope.entityId && scope.entityType && types.attributesScope.server.value) {
+                newSubscriptionId =
+                    attributeService.subscribeForEntityAttributes(scope.entityType, scope.entityId, types.attributesScope.server.value);
+            }
+            if (scope.subscriptionId && scope.subscriptionId != newSubscriptionId) {
+                attributeService.unsubscribeForEntityAttributes(scope.subscriptionId);
+            }
+            scope.subscriptionId = newSubscriptionId;
+        }
+
+        scope.$on('$destroy', function () {
+            if (scope.subscriptionId) {
+                attributeService.unsubscribeForEntityAttributes(scope.subscriptionId);
+            }
+        });
+
+        scope.reload();
+
+        $compile(element.contents())(scope);
+    }
+    function prepareEdgeEventData(data) {
+
+        data.forEach(
+            edgeEvent => {
+                edgeEvent.edgeEventActionText = $translate.instant(types.edgeEventActionType[edgeEvent.action].name);
+                edgeEvent.edgeEventTypeText = $translate.instant(types.edgeEventTypeTranslations[edgeEvent.edgeId.entityType].name);
+            }
+        );
+        return data;
+    }
+
+    return {
+        restrict: "E",
+        link: linker,
+        scope: {
+            entityType: '=',
+            entityId: '=',
+            tenantId: '='
+        }
+    };
+}
--- a/ui/src/app/edge/downlinks/edge-downlinks-table.tpl.html
+++ b/ui/src/app/edge/downlinks/edge-downlinks-table.tpl.html
@ -0,0 +1,46 @@
+<!--
+
+    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.
+
+-->
+<md-content flex class="md-padding tb-absolute-fill" layout="column">
+    <section layout="row">
+        <tb-timewindow flex ng-model="timewindow" history-only as-button="true"></tb-timewindow>
+        <md-button ng-disabled="$root.loading"
+                   class="md-icon-button" ng-click="reload()">
+            <md-icon>refresh</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.refresh' | translate }}
+            </md-tooltip>
+        </md-button>
+    </section>
+    <md-list flex layout="column" class="md-whiteframe-z1 tb-edge-downlinks-table">
+           <md-list class="tb-row tb-header" layout="row" layout-align="start center" tb-edge-downlinks-header event-type="{{eventType}}">
+           </md-list>
+        <md-progress-linear style="max-height: 0px;" md-mode="indeterminate" ng-disabled="!$root.loading"
+                            ng-show="$root.loading"></md-progress-linear>
+        <md-divider></md-divider>
+        <span translate layout-align="center center"
+              style="margin-top: 25px;"
+              class="tb-prompt" ng-show="noData()">edge.no-downlinks-prompt</span>
+        <md-virtual-repeat-container ng-show="hasData()" flex md-top-index="topIndex" tb-scope-element="repeatContainer">
+           <md-list-item md-virtual-repeat="event in theEvents" md-on-demand flex ng-style="hasScroll() ? {'margin-right':'-15px'} : {}">
+               <md-list class="tb-row" flex layout="row" layout-align="start center" tb-edge-downlinks-row event-type="{{eventType}}" event="{{event}}">
+               </md-list>
+               <md-divider flex></md-divider>
+           </md-list-item>
+       </md-virtual-repeat-container>
+    </md-list>
+</md-content>
--- a/ui/src/app/edge/downlinks/event-content-dialog.tpl.html
+++ b/ui/src/app/edge/downlinks/event-content-dialog.tpl.html
@ -0,0 +1,42 @@
+<!--
+
+    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.
+
+-->
+<md-dialog aria-label="{{ vm.title | translate }}">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 translate>{{ vm.title }}</h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="vm.close()">
+                    <ng-md-icon icon="close" aria-label="{{ 'dialog.close' | translate }}"></ng-md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content>
+            <div class="md-dialog-content">
+                <div flex id="tb-event-content" readonly
+                     ui-ace="vm.contentOptions"
+                     ng-model="vm.content">
+                </div>
+            </div>
+        </md-dialog-content>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-disabled="$root.loading" ng-click="vm.close()" style="margin-right:20px;">{{ 'action.close' |
+                translate }}
+            </md-button>
+        </md-dialog-actions>
+</md-dialog>
--- a/ui/src/app/edge/downlinks/event-header-edge-event.tpl.html
+++ b/ui/src/app/edge/downlinks/event-header-edge-event.tpl.html
@ -0,0 +1,23 @@
+<!--
+
+    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 translate class="tb-cell" flex="20">event.event-time</div>
+<div translate class="tb-cell" flex="10">event.event-type</div>
+<div translate class="tb-cell" flex="15">edge.event-action</div>
+<div translate class="tb-cell" flex="30">edge.entity-id</div>
+<div translate class="tb-cell" flex="15">edge.status</div>
+<div translate class="tb-cell" flex="10">edge.entity-info</div>
--- a/ui/src/app/edge/downlinks/event-row-edge-event.tpl.html
+++ b/ui/src/app/edge/downlinks/event-row-edge-event.tpl.html
@ -0,0 +1,37 @@
+<!--
+
+    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-cell" flex="20">{{ event.createdTime | date :  'yyyy-MM-dd HH:mm:ss' }}</div>
+<div class="tb-cell" flex="10">{{ event.edgeEventTypeText }}</div>
+<div class="tb-cell" flex="15">{{ event.edgeEventActionText }}</div>
+<div class="tb-cell" flex="30">{{ event.entityId }}</div>
+<div class="tb-cell" flex="15" ng-style="{'color': statusColor}">{{ updateStatus(event.createdTime) }}</div>
+<div class="tb-cell" flex="10">
+    <md-button ng-if="checkEdgeEventType(event.type)" class="md-icon-button md-primary"
+               ng-click="showEdgeEntityContent($event, 'edge.entity-info', 'JSON')"
+               aria-label="{{ 'action.view' | translate }}">
+        <md-tooltip md-direction="top">
+            {{ 'action.view' | translate }}
+        </md-tooltip>
+        <md-icon aria-label="{{ 'action.view' | translate }}"
+                 class="material-icons">
+            more_horiz
+        </md-icon>
+    </md-button>
+</div>
+
+
--- a/ui/src/app/edge/downlinks/event.scss
+++ b/ui/src/app/edge/downlinks/event.scss
@ -0,0 +1,97 @@
+/**
+ * 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.
+ */
+md-list.tb-event-table {
+  padding: 0;
+
+  md-list-item {
+    padding: 0;
+  }
+
+  .tb-row {
+    height: 48px;
+    padding: 0;
+    overflow: hidden;
+
+    .tb-cell {
+      text-overflow: ellipsis;
+
+      &.tb-scroll {
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+      }
+
+      &.tb-nowrap {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .tb-row:hover {
+    background-color: #eee;
+  }
+
+  .tb-header:hover {
+    background: none;
+  }
+
+  .tb-header {
+    .tb-cell {
+      font-size: 12px;
+      font-weight: 700;
+      color: rgba(0, 0, 0, .54);
+      white-space: nowrap;
+      background: none;
+    }
+  }
+
+  .tb-cell {
+    &:first-child {
+      padding-left: 14px;
+    }
+
+    &:last-child {
+      padding-right: 14px;
+    }
+    padding: 0 6px;
+    margin: auto 0;
+    overflow: hidden;
+    font-size: 13px;
+    color: rgba(0, 0, 0, .87);
+    text-align: left;
+    vertical-align: middle;
+
+    .md-button {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .tb-cell.tb-number {
+    text-align: right;
+  }
+}
+
+.tb-edge-downlinks-table-2 {
+  @extend .tb-event-table;
+}
+
+#tb-event-content {
+  width: 100%;
+  min-width: 400px;
+  height: 100%;
+  min-height: 50px;
+}
--- a/ui/src/app/edge/edges.tpl.html
+++ b/ui/src/app/edge/edges.tpl.html
@ -65,11 +65,18 @@
                            default-event-type="{{vm.types.eventType.error.value}}">
            </tb-event-table>
        </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'edge.downlinks' | translate }}">
-            <tb-edge-downlinks-table flex entity-type="vm.types.entityType.edge"
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'edge.edge' | translate }}">
+            <tb-edge-downlinks-table-old flex entity-type="vm.types.entityType.edge"
                            entity-id="vm.grid.operatingItem().id.id"
                            tenant-id="vm.grid.operatingItem().tenantId.id"
                            default-event-type="{{vm.types.edgeDownlinks.value}}">
+            </tb-edge-downlinks-table-old>
+        </md-tab>
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'edge.downlinks' | translate }}">
+            <tb-edge-downlinks-table flex entity-type="vm.types.entityType.edge"
+                                     entity-id="vm.grid.operatingItem().id.id"
+                                     tenant-id="vm.grid.operatingItem().tenantId.id"
+                                     default-event-type="{{vm.types.edgeDownlinks.value}}">
            </tb-edge-downlinks-table>
        </md-tab>
        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
--- a/ui/src/app/edge/index.js
+++ b/ui/src/app/edge/index.js
@ -25,6 +25,10 @@ import AssignEdgeToCustomerController from './assign-to-customer.controller';
 import AddEdgesToCustomerController from './add-edges-to-customer.controller';
 import SetRootRuleChainToEdgesController from './set-root-rule-chain-to-edges.controller';
 import EdgeDirective from './edge.directive';
+import EdgeDownlinksContentDialogController from './downlinks/edge-downlinks-content-dialog.controller';
+import EdgeDownlinksHeaderDirective from './downlinks/edge-downlinks-header.directive';
+import EdgeDownlinksRowDirective from './downlinks/edge-downlinks-row.directive';
+import EdgeDownlinksDirective from "./downlinks/edge-downlinks-table.directive";

 export default angular.module('thingsboard.edge', [
    uiRouter,
@ -39,5 +43,9 @@ export default angular.module('thingsboard.edge', [
    .controller('AssignEdgeToCustomerController', AssignEdgeToCustomerController)
    .controller('AddEdgesToCustomerController', AddEdgesToCustomerController)
    .controller('SetRootRuleChainToEdgesController', SetRootRuleChainToEdgesController)
+    .controller('EdgeDownlinksContentDialogController', EdgeDownlinksContentDialogController)
    .directive('tbEdge', EdgeDirective)
+    .directive('tbEdgeDownlinksHeader', EdgeDownlinksHeaderDirective)
+    .directive('tbEdgeDownlinksRow', EdgeDownlinksRowDirective)
+    .directive('tbEdgeDownlinksTable', EdgeDownlinksDirective)
    .name;
--- a/ui/src/app/event/edge-downlinks-table.tpl.html
+++ b/ui/src/app/event/edge-downlinks-table.tpl.html
@ -26,7 +26,7 @@
            </md-tooltip>
        </md-button>
    </section>
-    <md-list flex layout="column" class="md-whiteframe-z1 tb-edge-downlinks-table">
+    <md-list flex layout="column" class="md-whiteframe-z1 tb-edge-downlinks-table-old">
           <md-list class="tb-row tb-header" layout="row" layout-align="start center" tb-event-header event-type="{{eventType}}">
           </md-list>
        <md-progress-linear style="max-height: 0px;" md-mode="indeterminate" ng-disabled="!$root.loading"
--- a/ui/src/app/event/index.js
+++ b/ui/src/app/event/index.js
@ -28,5 +28,5 @@ export default angular.module('thingsboard.event', [
    .directive('tbEventHeader', EventHeaderDirective)
    .directive('tbEventRow', EventRowDirective)
    .directive('tbEventTable', EventTableDirective)
-    .directive('tbEdgeDownlinksTable', EdgeDownlinksDirective)
+    .directive('tbEdgeDownlinksTableOld', EdgeDownlinksDirective)
    .name;