RuleChain UI

@@ -24,7 +24,7 @@
 <div class="tb-cell" flex="20">{{event.body.dataType}}</div>
 <div class="tb-cell" flex="20">
     <md-button ng-if="event.body.data" class="md-icon-button md-primary"
-               ng-click="showContent($event, event.body.data, 'event.data', event.body.msgType)"
+               ng-click="showContent($event, event.body.data, 'event.data', event.body.dataType)"
                aria-label="{{ 'action.view' | translate }}">
         <md-tooltip md-direction="top">
             {{ 'action.view' | translate }}

@@ -1187,6 +1187,7 @@ export default angular.module('thingsboard.locale', [])
                 "rulenode": {
                     "details": "Details",
                     "events": "Events",
+                    "search": "Search nodes",
                     "add": "Add rule node",
                     "name": "Name",
                     "name-required": "Name is required.",

@@ -43,6 +43,9 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
     vm.editingRuleNodeLink = null;
     vm.isEditingRuleNodeLink = false;
 
+    vm.isLibraryOpen = true;
+    vm.ruleNodeSearch = '';
+
     vm.ruleChain = ruleChain;
     vm.ruleChainMetaData = ruleChainMetaData;
 
@@ -131,11 +134,11 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
     }
 
     vm.onEditRuleNodeClosed = function() {
-        //vm.editingRuleNode = null;
+        vm.editingRuleNode = null;
     };
 
     vm.onEditRuleNodeLinkClosed = function() {
-        //vm.editingRuleNodeLink = null;
+        vm.editingRuleNodeLink = null;
     };
 
     vm.saveRuleNode = function(theForm) {

@@ -18,13 +18,58 @@
   .tb-fullscreen-button-style {
     z-index: 1;
   }
+  section.tb-header-buttons.tb-library-open {
+    pointer-events: none;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 1;
+    .md-button.tb-btn-open-library {
+      left: 0px;
+      top: 0px;
+      line-height: 36px;
+      width: 36px;
+      height: 36px;
+      margin: 4px 0 0 4px;
+      opacity: 0.5;
+    }
+  }
   .tb-rulechain-library {
     width: 250px;
     min-width: 250px;
-    overflow-y: auto;
-    overflow-x: hidden;
-
+    z-index: 1;
+    md-toolbar {
+      min-height: 48px;
+      height: 48px;
+      .md-toolbar-tools>.md-button:last-child {
+        margin-right: 0px;
+      }
+      .md-toolbar-tools {
+        font-size: 14px;
+        padding: 0px 6px;
+        .md-button.md-icon-button {
+          margin: 0px;
+          &.tb-small {
+            height: 32px;
+            min-height: 32px;
+            line-height: 20px;
+            padding: 6px;
+            width: 32px;
+            md-icon {
+              line-height: 20px;
+              font-size: 20px;
+              height: 20px;
+              width: 20px;
+              min-height: 20px;
+              min-width: 20px;
+            }
+          }
+        }
+      }
+    }
     .tb-rulechain-library-panel-group {
+      overflow-y: auto;
+      overflow-x: hidden;
       .tb-panel-title {
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -33,7 +78,7 @@
         min-width: 180px;
       }
       .fc-canvas {
-        background: none;
+        background: #f9f9f9;
       }
       md-icon.md-expansion-panel-icon {
         margin-right: 0px;
@@ -55,6 +100,7 @@
     }
   }
   .tb-rulechain-graph {
+    z-index: 0;
     overflow: auto;
   }
 }

@@ -22,8 +22,54 @@
             ng-keyup="vm.keyUp($event)">
     <section class="tb-rulechain-container" flex layout="column">
         <div class="tb-rulechain-layout" flex layout="row">
-            <div class="tb-rulechain-library">
-                <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple>
+            <section layout="row" layout-wrap
+                     class="tb-header-buttons md-fab tb-library-open">
+                <md-button ng-show="!vm.isLibraryOpen"
+                           class="tb-btn-header tb-btn-open-library md-primary md-fab md-fab-top-left"
+                           aria-label="{{ 'action.apply' | translate }}"
+                           ng-click="vm.isLibraryOpen = true">
+                    <md-tooltip md-direction="top">
+                        {{ 'action.apply-changes' | translate }}
+                    </md-tooltip>
+                    <ng-md-icon icon="menu"></ng-md-icon>
+                </md-button>
+            </section>
+            <md-sidenav class="tb-rulechain-library md-sidenav-left md-whiteframe-4dp"
+                        md-disable-backdrop
+                        md-is-locked-open="vm.isLibraryOpen"
+                        md-is-open="vm.isLibraryOpen"
+                        md-component-id="rulechain-library-sidenav" layout="column">
+                <md-toolbar>
+                    <div class="md-toolbar-tools">
+                        <md-button class="md-icon-button tb-small" aria-label="{{ 'action.search' | translate }}">
+                            <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
+                            <md-tooltip md-direction="top">
+                                {{'rulenode.search' | translate}}
+                            </md-tooltip>
+                        </md-button>
+                        <div layout="row" md-theme="tb-dark" flex>
+                            <md-input-container flex>
+                                <label>&nbsp;</label>
+                                <input ng-model="vm.ruleNodeSearch" placeholder="{{'rulenode.search' | translate}}"/>
+                            </md-input-container>
+                        </div>
+                        <md-button class="md-icon-button tb-small" aria-label="Close" ng-click="vm.ruleNodeSearch = ''">
+                            <md-icon aria-label="Close" class="material-icons">close</md-icon>
+                            <md-tooltip md-direction="top">
+                                {{ 'action.close' | translate }}
+                            </md-tooltip>
+                        </md-button>
+                        <md-button class="md-icon-button tb-small" aria-label="Close" ng-click="vm.isLibraryOpen = false">
+                            <md-icon aria-label="Close" class="material-icons">chevron_left</md-icon>
+                            <md-tooltip md-direction="top">
+                                {{ 'action.close' | translate }}
+                            </md-tooltip>
+                        </md-button>
+                    </div>
+                </md-toolbar>
+                <md-expansion-panel-group flex
+                                          ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group"
+                                          md-component-id="libraryPanelGroup" auto-expand="true" multiple>
                     <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
                         <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
                                                       ng-mouseleave="vm.destroyTooltips()">
@@ -49,7 +95,7 @@
                         </md-expansion-panel-expanded>
                     </md-expansion-panel>
                 </md-expansion-panel-group>
-            </div>
+            </md-sidenav>
             <div flex class="tb-rulechain-graph">
                 <fc-canvas id="tb-rulchain-canvas"
                            model="vm.ruleChainModel"