UI: Message type select component.

ui/src/app/common/types.constant.js

@@ -590,6 +590,72 @@ export default angular.module('thingsboard.types', [])
                     icon: "help_outline"
                 }
             },
+            messageType: {
+                'HUI': {
+                    name: 'hui',
+                    value: 'HUI'
+                },
+                'POST_ATTRIBUTES_REQUEST': {
+                    name: 'Post attributes',
+                    value: 'POST_ATTRIBUTES_REQUEST'
+                },
+                'POST_TELEMETRY_REQUEST': {
+                    name: 'Post telemetry',
+                    value: 'POST_TELEMETRY_REQUEST'
+                },
+                'TO_SERVER_RPC_REQUEST': {
+                    name: 'RPC Request from Device',
+                    value: 'TO_SERVER_RPC_REQUEST'
+                },
+                'RPC_CALL_FROM_SERVER_TO_DEVICE': {
+                    name: 'RPC Request to Device',
+                    value: 'RPC_CALL_FROM_SERVER_TO_DEVICE'
+                },
+                'ACTIVITY_EVENT': {
+                    name: 'Activity Event',
+                    value: 'ACTIVITY_EVENT'
+                },
+                'INACTIVITY_EVENT': {
+                    name: 'Inactivity Event',
+                    value: 'INACTIVITY_EVENT'
+                },
+                'CONNECT_EVENT': {
+                    name: 'Connect Event',
+                    value: 'CONNECT_EVENT'
+                },
+                'DISCONNECT_EVENT': {
+                    name: 'Disconnect Event',
+                    value: 'DISCONNECT_EVENT'
+                },
+                'ENTITY_CREATED': {
+                    name: 'Entity Created',
+                    value: 'ENTITY_CREATED'
+                },
+                'ENTITY_UPDATED': {
+                    name: 'Entity Updated',
+                    value: 'ENTITY_UPDATED'
+                },
+                'ENTITY_DELETED': {
+                    name: 'Entity Deleted',
+                    value: 'ENTITY_DELETED'
+                },
+                'ENTITY_ASSIGNED': {
+                    name: 'Entity Assigned',
+                    value: 'ENTITY_ASSIGNED'
+                },
+                'ENTITY_UNASSIGNED': {
+                    name: 'Entity Unassigned',
+                    value: 'ENTITY_UNASSIGNED'
+                },
+                'ATTRIBUTES_UPDATED': {
+                    name: 'Attributes Updated',
+                    value: 'ATTRIBUTES_UPDATED'
+                },
+                'ATTRIBUTES_DELETED': {
+                    name: 'Attributes Deleted',
+                    value: 'ATTRIBUTES_DELETED'
+                }
+            },
             valueType: {
                 string: {
                     value: "string",

ui/src/app/locale/locale.constant.js

@@ -1184,6 +1184,7 @@ export default angular.module('thingsboard.locale', [])
                     "test-script-function": "Test script function",
                     "message": "Message",
                     "message-type": "Message type",
+                    "select-message-type": "Select message type",
                     "message-type-required": "Message type is required",
                     "metadata": "Metadata",
                     "metadata-required": "Metadata entries can't be empty.",

ui/src/app/rulechain/index.js

@@ -23,6 +23,7 @@ import RuleNodeDefinedConfigDirective from './rulenode-defined-config.directive'
 import RuleNodeConfigDirective from './rulenode-config.directive';
 import RuleNodeDirective from './rulenode.directive';
 import LinkDirective from './link.directive';
+import MessageTypeAutocompleteDirective from './message-type-autocomplete.directive';
 import NodeScriptTest from './script/node-script-test.service';
 
 export default angular.module('thingsboard.ruleChain', [])
@@ -37,5 +38,6 @@ export default angular.module('thingsboard.ruleChain', [])
     .directive('tbRuleNodeConfig', RuleNodeConfigDirective)
     .directive('tbRuleNode', RuleNodeDirective)
     .directive('tbRuleNodeLink', LinkDirective)
+    .directive('tbMessageTypeAutocomplete', MessageTypeAutocompleteDirective)
     .factory('ruleNodeScriptTest', NodeScriptTest)
     .name;

ui/src/app/rulechain/message-type-autocomplete.directive.js

@@ -0,0 +1,100 @@
+/*
+ * Copyright © 2016-2018 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 './message-type-autocomplete.scss';
+
+/* eslint-disable import/no-unresolved, import/default */
+
+import messageTypeAutocompleteTemplate from './message-type-autocomplete.tpl.html';
+
+/* eslint-enable import/no-unresolved, import/default */
+
+/*@ngInject*/
+export default function MessageTypeAutocomplete($compile, $templateCache, $q, $filter, types) {
+
+    var linker = function (scope, element, attrs, ngModelCtrl) {
+        var template = $templateCache.get(messageTypeAutocompleteTemplate);
+        element.html(template);
+
+        var messageTypeList = [];
+        for (var t in types.messageType) {
+            var type = types.messageType[t];
+            messageTypeList.push(type);
+        }
+
+        scope.messageType = null;
+        scope.messageTypeSearchText = '';
+
+        scope.fetchMessageTypes = function(searchText) {
+            var deferred = $q.defer();
+            var result = $filter('filter')(messageTypeList, {'name': searchText});
+            if (result && result.length) {
+                deferred.resolve(result);
+            } else {
+                deferred.resolve([{name: searchText, value: searchText}]);
+            }
+            return deferred.promise;
+        };
+
+        scope.messageTypeSearchTextChanged = function() {
+        };
+
+        scope.updateView = function () {
+            if (!scope.disabled) {
+                var value = null;
+                if (scope.messageType) {
+                    value = scope.messageType.value;
+                }
+                ngModelCtrl.$setViewValue(value);
+            }
+        };
+
+        ngModelCtrl.$render = function () {
+            var value = ngModelCtrl.$viewValue;
+            if (value) {
+                var result = $filter('filter')(messageTypeList, {'value': value}, true);
+                if (result && result.length) {
+                    scope.messageType = result[0];
+                } else {
+                    scope.messageType = {
+                        name: value,
+                        value: value
+                    };
+                }
+            } else {
+                scope.messageType = null;
+            }
+        };
+
+        scope.$watch('messageType', function (newValue, prevValue) {
+            if (!angular.equals(newValue, prevValue)) {
+                scope.updateView();
+            }
+        });
+
+        $compile(element.contents())(scope);
+    }
+
+    return {
+        restrict: "E",
+        require: "^ngModel",
+        link: linker,
+        scope: {
+            theForm: '=?',
+            disabled:'=ngDisabled',
+            required:'=ngRequired'
+        }
+    };
+}

ui/src/app/rulechain/message-type-autocomplete.scss

@@ -0,0 +1,25 @@
+/**
+ * Copyright © 2016-2018 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-message-type-autocomplete {
+  .tb-message-type-item {
+    display: block;
+    height: 48px;
+  }
+  li {
+    height: auto !important;
+    white-space: normal !important;
+  }
+}

ui/src/app/rulechain/message-type-autocomplete.tpl.html

@@ -0,0 +1,41 @@
+<!--
+
+    Copyright © 2016-2018 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-autocomplete ng-required="required"
+                 ng-disabled="disabled"
+                 md-no-cache="true"
+                 md-input-name="messageType"
+                 ng-model="messageType"
+                 md-selected-item="messageType"
+                 md-search-text="messageTypeSearchText"
+                 md-search-text-change="messageTypeSearchTextChanged()"
+                 md-items="item in fetchMessageTypes(messageTypeSearchText)"
+                 md-item-text="item.name"
+                 md-min-length="0"
+                 placeholder="{{ 'rulenode.select-message-type' | translate }}"
+                 md-floating-label="{{ 'rulenode.message-type' | translate }}"
+                 md-select-on-match="false"
+                 md-menu-class="tb-message-type-autocomplete">
+    <md-item-template>
+        <div class="tb-message-type-item">
+            <span md-highlight-text="messageTypeSearchText" md-highlight-flags="^i">{{item.name}}</span>
+        </div>
+    </md-item-template>
+    <div ng-messages="theForm.messageType.$error">
+        <div translate ng-message="required">rulenode.message-type-required</div>
+    </div>
+</md-autocomplete>

ui/src/app/rulechain/script/node-script-test.tpl.html

@@ -38,13 +38,12 @@
                             <ng-form name="payloadForm">
                                 <div layout="column" style="height: 100%;">
                                     <div layout="row">
-                                        <md-input-container class="md-block" style="margin-bottom: 0px; min-width: 300px;">
+                                        <tb-message-type-autocomplete
-                                            <label translate>rulenode.message-type</label>
+                                                style="margin-bottom: 0px; min-width: 300px;"
-                                            <input required name="msgType" ng-model="vm.inputParams.msgType">
+                                                ng-required="true"
-                                            <div ng-messages="payloadForm.msgType.$error">
+                                                ng-model="vm.inputParams.msgType"
-                                                <div translate ng-message="required">rulenode.message-type-required</div>
+                                                the-form="payloadForm">
-                                            </div>
+                                        </tb-message-type-autocomplete>
-                                        </md-input-container>
                                     </div>
                                     <tb-json-content flex
                                                      ng-model="vm.inputParams.msg"
@@ -99,14 +98,14 @@
                                              validate-content="false"
                                              ng-readonly="true"
                                              fill-height="true">
-                            </tb-json-content>
+                            </tb-json-content>generateReport
                         </div>
                     </div>
                 </div>
             </div>
         </md-dialog-content>
         <md-dialog-actions layout="row">
-            <md-button ng-disabled="$root.loading" ng-click="vm.test()" class="md-raised md-primary">
+            <md-button ng-disabled="$root.loading || theForm.$invalid" ng-click="vm.test()" class="md-raised md-primary">
                 {{ 'rulenode.test' | translate }}
             </md-button>
             <span flex></span>