Work in progress

RaphaelGauthier · Apr 5, 2019 · e8c9efe · e8c9efe
1 parent 7a6d44a
commit e8c9efe
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 22 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/angular/nodeProperties.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/angular/nodeProperties.js
@@ -55,13 +55,22 @@ app.controller('nodePropertiesCtrl', function ($scope, $http, DTOptionsBuilder,
     $scope.newProperty = {'name':"", 'value':""};
   }
 
+  $scope.formatIsJson = function(value) {
+    var res = (value !== null && typeof value === 'object');
+    return res;
+  }
+  $scope.getFormat = function(value) {
+    var res = $scope.formatIsJson(value) ? "JSON" : "String";
+    return res;
+  }
   $scope.formatContent = function(property) {
     var value = property.value
-      if (value !== null && typeof value === 'object') {
-        value = JSON.stringify(value, null, 2)
-      }
+    if ($scope.formatIsJson(value)) {
+      value = JSON.stringify(value, null, 2);
+    }
     return value;
   }
+
   $scope.options =
     DTOptionsBuilder.newOptions().
       withPaginationType('full_numbers').
@@ -91,8 +100,9 @@ app.controller('nodePropertiesCtrl', function ($scope, $http, DTOptionsBuilder,
     }
     currentNodeId = nodeId
     $scope.properties = properties;
-
     $scope.urlAPI = contextPath + '/secure/api/nodes/'+ nodeId;
+    $('.rudder-label').bsTooltip();
+    new ClipboardJS('.btn-clipboard');
   }
 
   $scope.addProperty = function(){
@@ -164,8 +174,4 @@ app.config(function($locationProvider) {
     enabled: true,
     requireBase: false
   });
-})
-
-$(document).ready(function(){
-  $('.rudder-label').bsTooltip();
-});
+})
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/utils/clipboard.min.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/utils/clipboard.min.js
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-datatable.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-datatable.css
@@ -326,3 +326,45 @@ td.listclose:after {
   font-style: italic;
   padding: 10px 6px;
 }
+
+/* NODES PAGE */
+#nodePropertiesTab > tbody > tr > td.delete-action{
+  position: relative;
+}
+#nodePropertiesTab > tbody > tr > td.delete-action > .fa{
+  opacity:0;
+  cursor:pointer;
+  font-size:18px;
+  position: absolute;
+  top: calc(50% - 9px);
+  left: calc(50% - 7px);
+  transition-property: opacity;
+  transition-duration: .1s;
+}
+#nodePropertiesTab > tbody > tr:hover > td.delete-action > .fa{
+  opacity: 1;
+}
+#nodePropertiesTab th:first-child{
+  width: 20% !important;
+}
+#nodePropertiesTab th:nth-child(2){
+  width: 95px !important;
+}
+#nodePropertiesTab th:nth-child(3){
+  width: calc(80% - 125px) !important;
+}
+#nodePropertiesTab th:last-child{
+  width: 30px !important;
+}
+#nodePropertiesTab > tbody > tr > td.property-value{
+  cursor: pointer;
+  position: relative;
+  padding: 0 !important;
+}
+#nodePropertiesTab > tbody > tr > td.property-value > button{
+  font-size: 1.2em;
+  position: absolute;
+  right: 35px;
+  top: 2px;
+  max-height: 27px;
+}
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -107,8 +107,8 @@ pre.json-beautify, .content-wrapper pre.json-beautify{
   overflow: hidden;
   position: relative;
   margin-bottom: 0;
-  padding: 0;
-  padding-right: 25px;
+  padding: 6px;
+  padding-right: 65px;
   white-space: pre-wrap;
   word-break: break-all;
   word-wrap: break-word;
@@ -123,7 +123,7 @@ pre.json-beautify.toggle, .content-wrapper pre.json-beautify.toggle{
 pre.json-beautify:after,.content-wrapper pre.json-beautify:after{
   position:absolute;
   right:10px;
-  top : 4px;
+  top : 10px;
   color:#333;
   content: "\f054";
   display: inline-block;
@@ -1158,10 +1158,10 @@ ul.graph-legend > li.legend:hover{
 }
 #addPropTable td.json-check-col{
   width: 80px;
-  background-color:#f4f4f4;
 }
 #addPropTable td.json-check-col > div{
   position:relative;
+  background-color: #f4f4f4;
 }
 #addPropTable td.json-check-col button{
   height: 33px;
@@ -1210,14 +1210,6 @@ ul.graph-legend > li.legend:hover{
   font-weight: normal;
   font-size: 13.2px;
 }
-#nodePropertiesTab > tbody > tr > td.delete-action > .fa{
-  display:none;
-  cursor:pointer;
-  font-size:18px;
-}
-#nodePropertiesTab > tbody > tr:hover > td.delete-action > .fa{
-  display:inline-block;
-}
 pre.display-keys{
   padding: 6px 8px;
 }

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
@@ -45,6 +45,7 @@
 
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/utils/diff.js"></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/utils/json2.js"></script>
+    <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/utils/clipboard.min.js"></script>
 
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/rudder/rudder.js"></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/rudder/rudder-datatable.js"></script>

diff --git a/...udder/rudder-web/src/main/webapp/templates-hidden/components/ComponentNodeProperties.html b/...udder/rudder-web/src/main/webapp/templates-hidden/components/ComponentNodeProperties.html
@@ -11,6 +11,7 @@
              <thead>
                <tr class="head tablewidth">
                  <th >Name</th>
+                 <th >Format</th>
                  <th >Value</th>
                  <th ></th>
                </tr>
@@ -26,7 +27,11 @@
                    </div>
                  </td>
                  <td >
-                   <pre class='json-beautify' onclick='$(this).toggleClass("toggle")'>{{formatContent(property)}}</pre>
+                   {{getFormat(property.value)}}
+                 </td>
+                 <td class="property-value">
+                   <pre class='json-beautify' onclick="$(this).toggleClass('toggle')">{{formatContent(property)}}</pre>
+                   <button class="btn btn-xs btn-default btn-clipboard" data-clipboard-text="{{formatContent(property)}}" data-toggle='tooltip' data-placement='left' data-container="html" title="Copy to clipboard"><i class="ion ion-clipboard"></i></button>
                  </td>
                  <td class="text-center delete-action">
                    <span ng-if="property.rights !== 'read-only'" class="fa fa-times text-danger" ng-click="popupDeletion(property.name, $index)"></span>