Work in progress

RaphaelGauthier · Jan 19, 2017 · 1a19d7c · 1a19d7c
1 parent 29c8923
commit 1a19d7c
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 30 deletions.
diff --git a/rudder-web/src/main/webapp/javascript/rudder/angular/dataSource.js b/rudder-web/src/main/webapp/javascript/rudder/angular/dataSource.js
@@ -59,7 +59,7 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
   $scope.datasources = [];
   // Selected data source
   $scope.selectedDatasource;
-
+  $scope.treeId = "#datasources-tree";
   /* Get data sources */
   $scope.getDataSources = function(){
     return $http.get(contextPath + '/secure/api/latest/datasources').then(function(response){
@@ -134,6 +134,29 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
 	  "isNew":true
 	};
   }
+  $scope.updateKeyName = function(){
+    if($scope.selectedDatasource.isNew){
+      if($scope.selectedDatasource.name){
+        var r=$scope.selectedDatasource.name.toLowerCase();
+        r = r.replace(new RegExp("\\s", 'g'),"_");
+        r = r.replace(new RegExp("[àáâãäå]", 'g'),"a");
+        r = r.replace(new RegExp("æ", 'g'),"ae");
+        r = r.replace(new RegExp("ç", 'g'),"c");
+        r = r.replace(new RegExp("[èéêë]", 'g'),"e");
+        r = r.replace(new RegExp("[ìíîï]", 'g'),"i");
+        r = r.replace(new RegExp("ñ", 'g'),"n");
+        r = r.replace(new RegExp("[òóôõö]", 'g'),"o");
+        r = r.replace(new RegExp("œ", 'g'),"oe");
+        r = r.replace(new RegExp("[ùúûü]", 'g'),"u");
+        r = r.replace(new RegExp("[ýÿ]", 'g'),"y");
+        r = r.replace(new RegExp("\\W", 'g'),"_");
+        $scope.selectedDatasource.id = r;
+      }else{
+        $scope.selectedDatasource.id = "";
+      }
+    }
+  }
+
   $scope.saveDatasource = function(){
     //CONVERT TIMES
     $scope.selectedDatasource.runParameters.schedule.duration = minuteConvert($scope.selectedDatasource.modifiedTimes.schedule)
@@ -182,7 +205,11 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
   }
   $scope.toggleHeaders = function(idHeader, event){
     $('#'+idHeader).toggle(80);
-    $(event.currentTarget).find('.fa').toggleClass('fa-rotate-180');
+    $(event.currentTarget).find('.fa').toggleClass('fa-rotate-90');
+  }
+  $scope.toggleExample = function(event){
+    $(event.currentTarget).parent().find('.example-help').toggle();
+    $(event.currentTarget).toggleClass('show');
   }
   $scope.addNewHeader = function(datasource){
     if(!datasource.type.parameters.headers.hasOwnProperty(datasource.newHeader.key)){
@@ -196,6 +223,12 @@ app.controller("datasourceCtrl", ['$scope', '$timeout', 'orderByFilter','$http',
   $scope.hasHeaders = function(datasource){
     return Object.keys(datasource.type.parameters.headers).length;
   }
+
+  $scope.toggleInfo = function(event, action){
+    $(event.currentTarget).bsPopover(action);
+  }
+
+  adjustHeight($scope.treeId, true);
 }]);
 
 function timeConvert(time) {

diff --git a/rudder-web/src/main/webapp/javascript/rudder/angular/filters.js b/rudder-web/src/main/webapp/javascript/rudder/angular/filters.js
@@ -403,14 +403,6 @@ app.config(function($locationProvider) {
   });
 })
 
-// Adjust tree height
-function adjustHeight(treeId){
-  var tree = $(treeId);
-  var offsetTop = tree.offset().top + 10;
-  var maxHeight = 'calc(100vh - '+ offsetTop + 'px)';
-  tree.css('max-height',maxHeight);
-}
-
 // PLUGIN JSTREE : SEARCH-TAG
 $.jstree.plugins.searchtag = function (options, parent) {
   var that = this;

diff --git a/rudder-web/src/main/webapp/javascript/rudder/rudder.js b/rudder-web/src/main/webapp/javascript/rudder/rudder.js
@@ -633,7 +633,6 @@ function showFileManager(idField){
   angular.element(fileManagerApp).injector().invoke(function($compile) {
     var $scope = angular.element(fileManagerApp).scope();
     fileManagerApp.append($compile(filemanager)($scope));
-
     $scope.directiveId = idField;
     // Finally, refresh the watch expressions in the new element
     $scope.$apply();
@@ -648,4 +647,13 @@ function showFileManager(idField){
 function hideFileManager(){
   $(document).off('keydown.closeWindow');
   $("angular-filemanager").remove();
+}
+
+//Adjust tree height
+function adjustHeight(treeId, height){
+  var tree = $(treeId);
+  var offsetTop = tree.offset().top + 12;
+  var maxHeight = 'calc(100vh - '+ offsetTop + 'px)';
+  var cssProp = height ? 'height' : 'max-height'
+  tree.css(cssProp,maxHeight);
 }
diff --git a/rudder-web/src/main/webapp/secure/administration/dataSourceManagement.html b/rudder-web/src/main/webapp/secure/administration/dataSourceManagement.html
@@ -8,9 +8,11 @@
     <div class="row">
       <div class="col-md-5 col-lg-4" style="padding-right:7.5px;">
         <div class="left-container col-xs-12">
-          <div class="page-title">Data sources</div>
+          <div class="page-title">
+            Data sources
+            <button type="button" class="btn btn-success btn-xs" ng-click="createNewDatasource()">New data source <i class="add-icon ion ion-android-add-circle"></i></button>
+          </div>
           <div id="datasources-tree">
-            <button type="button" class="btn btn-success" ng-click="createNewDatasource()">New data source <i class="add-icon ion ion-android-add-circle"></i></button>
             <ul ng-cloak>
               <li ng-repeat="datasource in datasources track by $index" ng-click="selectDatasource(datasource.id)">
                 <h4 class="no-margin">
@@ -33,11 +35,13 @@ <h4 class="no-margin">
           <form class="bloc-body show-details" name="forms.datasourceForm">
             <div class="form-group">
               <label for="name">Name</label>
-              <input type="text" class="form-control input-sm" id="name" ng-value="selectedDatasource.name" name="datasourceName" required ng-model="selectedDatasource.name" >
+              <input type="text" class="form-control input-sm" id="name" ng-value="selectedDatasource.name" name="datasourceName" required ng-model="selectedDatasource.name" ng-change="updateKeyName()" ng-focus="focusName=true" ng-blur="focusName=false">
               <span class="text-danger" ng-show="forms.datasourceForm.datasourceName.$error.required && forms.datasourceForm.datasourceName.$dirty">Name is required</span>
+              <span class="text-danger" ng-show="focusName">A data source already has this name.</span>
             </div>
             <div class="form-group">
               <label for="key">Key name</label>
+              <div class="group-warning" ng-show="selectedDatasource.isNew"><span class="ion ion-alert-circled"></span>Key name cannot be modified after creation.</div>
               <input type="text" class="form-control input-sm" id="key" name="datasourceKey" ng-value="selectedDatasource.id" required ng-model="selectedDatasource.id" ng-if="selectedDatasource.isNew">
               <span class="text-danger" ng-show="forms.datasourceForm.datasourceKey.$error.required && forms.datasourceForm.datasourceKey.$dirty">Key name is required</span>
               <div class="readonly" ng-if="!selectedDatasource.isNew">{{selectedDatasource.id}}</div>
@@ -50,16 +54,20 @@ <h4 class="no-margin">
               </div>
             </div>
             <div class="form-group">
-              <label for="description">Description</label>
+              <label for="description" class="optional">Description</label>
               <textarea class="form-control input-sm" id="description" ng-value="selectedDatasource.description" ng-model="selectedDatasource.description"></textarea>
             </div>
             <div class="form-group">
-              <label class="bloc">Type</label>
+              <label class="bloc">Type<span class="fa fa-question-circle icon-info" ng-mouseover="toggleInfo($event, 'show')" ng-mouseout="toggleInfo($event, 'hide')" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."></span></label>
               <span class="type">{{selectedDatasource.type.name}}</span>
             </div>
-            <div class="form-group">
-              <label for="url">URL</label>
+            <div class="form-group clearfix">
+              <label for="url" class="optional">URL</label>
+              <a class="btn btn-primary btn-xs pull-right btn-example" ng-click="toggleExample($event)">Example</a>
               <input type="text" class="form-control input-sm" id="url" ng-value="selectedDatasource.type.parameters.url" ng-model="selectedDatasource.type.parameters.url">
+              <div class="example-help" style="display:none;">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat :
+              </div>
             </div>
             <ul class="form-group list-sm">
               <li class="rudder-form">
@@ -78,9 +86,9 @@ <h4 class="no-margin">
               </li>
             </ul>
             <div class="form-group">
-              <label><a href="" ng-click="toggleHeaders('headers',$event);"> Headers <span class="fa fa-chevron-down"></span></a></label>
+              <label class="optional-link"><a href="" ng-click="toggleHeaders('headers',$event);"><b>Headers</b><span class="fa fa-chevron-right"></span></a></label>
               <div id="headers">
-                <div class="group-header-warning" ng-hide="hasHeaders(selectedDatasource)"><span class="ion ion-alert-circled"></span>This datasource does not contain header.</div>
+                <div class="group-warning" ng-hide="hasHeaders(selectedDatasource)"><span class="ion ion-alert-circled"></span>This datasource does not contain header.</div>
                 <div class="input-group group-header" ng-repeat="(key,value) in selectedDatasource.type.parameters.headers track by $index">
                   <input type="text" class="form-control input-sm" id="header-{{$index}}" ng-model="key" ng-change="updateKey(selectedDatasource.type.parameters.headers, $index ,key)">
                   <span class="input-group-addon">:</span>
@@ -101,11 +109,16 @@ <h4 class="no-margin">
                 </div>
               </div>
             </div>
-            <div class="form-group">
-              <label for="jsonpath">Json path</label>
+            <div class="form-group clearfix">
+              <label for="jsonpath" class="optional">Json path</label>
+              <a class="btn btn-primary btn-xs pull-right btn-example" ng-click="toggleExample($event)" style="right:1px;">Example</a>
               <div class="input-group">
                 <label class="input-group-addon addon" for="jsonpath">$.</label>
-                <input type="text" class="form-control input-sm" id="jsonpath" ng-value="selectedDatasource.type.parameters.path" ng-model="selectedDatasource.type.parameters.path">
+                <input type="text" class="form-control input-sm" id="jsonpath" n
+                g-value="selectedDatasource.type.parameters.path" ng-model="selectedDatasource.type.parameters.path">
+              </div>
+              <div class="example-help" style="display:none;">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat :
               </div>
             </div>
             <div class="form-group">

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder-datasource.css b/rudder-web/src/main/webapp/style/rudder/rudder-datasource.css
@@ -67,7 +67,7 @@
 .datasource-bloc > .bloc-body{
   padding:0;
   height:0;
-  overflow:hidden;
+  overflow-x:visible;
   transition-duration:.3s;
   position:relative;
   border-top: 0px solid #ddd;
@@ -91,10 +91,11 @@
 .datasource-bloc > .bloc-body .input-group.group-header{
 	margin-bottom:8px;
 }
-.datasource-bloc > .bloc-body .group-header-warning{
+.datasource-bloc > .bloc-body .group-warning{
   color: #f08004;
+  margin-bottom: 6px;
 }
-.datasource-bloc > .bloc-body .group-header-warning > span{
+.datasource-bloc > .bloc-body .group-warning > span{
   font-size: 16px;
   margin-right: 10px;
 }
@@ -146,6 +147,14 @@
 .datasource-bloc > .bloc-body label{
   cursor:pointer;
 }
+label.optional:after,label.optional-link > a > b:first-child:after{
+  content:"- Optional";
+  margin-left:3px;
+  font-style:italic;
+  color:#777;
+  font-size:12px;
+  font-weight: normal;
+}
 .datasource-bloc > .bloc-body label.bloc{
   display:block;
   cursor:default;
@@ -196,7 +205,45 @@
 .datasource-bloc > .bloc-body .actions .btn{
   min-width:60px;
 }
-
+/* EXAMPLE */
+.example-help{
+  border: 1px solid #d0d0d0;
+  border-top: none;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding: 6px;
+  background-color: #f4f4f4;
+  font-size: 11px;
+}
+a.btn.btn-example{
+  position: relative;
+  bottom: -4px;
+  right: 0px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 5;
+}
+a.btn.btn-example + input, a.btn.btn-example + .input-group > input{
+  border-top-right-radius:0 !important;
+}
+a.btn.btn-example.show + input, a.btn.btn-example.show + .input-group > input, a.btn.btn-example.show + .input-group > .input-group-addon{
+  border-bottom-left-radius:0 !important;
+  border-bottom-right-radius:0 !important;
+}
+a.btn-example:after{
+  content: "\f06e";
+  margin-left: 5px;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  font: normal normal normal 14px/1 FontAwesome;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+a.btn-example.show:after{
+  content: "\f070";
+}
 /* LINK HOVER */
 .datasource-bloc > .bloc-footer:hover span,.datasource-bloc > .bloc-header > .ion-edit:hover,.datasource-bloc > .bloc-header > .ion-trash-a:hover{
   opacity:1;
@@ -346,6 +393,14 @@ span.type{
   position: relative;
   margin-left: 8px;
 }
+.btn.btn-xs > i.add-icon{
+  font-size: 15px;
+  margin-left: 2px;
+}
+.page-title > .btn.btn-xs{
+  float: right;
+  margin-top: 5px;
+}
 #datasource{
   background:none;
 }
@@ -359,7 +414,13 @@ span.type{
   height:calc(100vh - 130px);
 }
 .left-container{
-  height:calc(100vh - 80px);
+  height:auto;
+}
+#datasources-tree{
+  overflow-x:hidden;
+  overflow-y:auto;
+  margin-right: -15px;
+  padding-right: 15px;
 }
 #datasources-tree li{
   padding: 15px 10px;
@@ -414,7 +475,7 @@ ul > li.rudder-form > .input-group .input-group-addon{
   background-color: #f4f4f4;
 }
 ul.list-sm > li.rudder-form > .input-group .input-group-addon{
-  padding: 0 11px;
+  padding: 0 7px;
 }
 ul > li.rudder-form > .input-group label.form-control .glyphicon.info{
   top:3px;

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -1292,6 +1292,14 @@ form .tooltip-content p {
   float: left;
   font-family: Verdana,Arial,sans-serif;
 }
+.tw-bs label > .icon-info{
+  margin-left: 5px;
+  color: #337ab7;
+  cursor:help;
+}
+.tw-bs label > .icon-info:hover{
+  color: #286090;
+}
 
 /*
 *    CALLOUT-FADE
@@ -1978,7 +1986,10 @@ hr.separation{
   padding: 0;
   font-family: inherit;
   background-color: #fff;
-  border: 1px solid rgba(34, 45, 50, 0.44);
+  border: 1px solid #ddd;
+  z-index:9999999;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
 }
 
 /* ----------------- BUTTONS -----------------  */