Revealable text, both password masking and ellipsizing details

This manually cherry-picks:

kubernetes-ui/object-describer#21

Closes #2383
Reviewed-by: Marius Vollmer <[email protected]>

Author: stefwalter

pkg/kubernetes/Makefile.am

@@ -26,6 +26,7 @@ kubernetesdebug_DATA = \
 	pkg/kubernetes/node.js \
 	pkg/kubernetes/object-describer.js \
 	pkg/kubernetes/deploy.js \
+	pkg/kubernetes/revealable.css \
 	pkg/kubernetes/topology.css \
 	pkg/kubernetes/topology.js \
 	pkg/kubernetes/topology-graph.css \

pkg/kubernetes/app.css

@@ -1,6 +1,7 @@
 @import url('details.css');
 @import url('topology-graph.css');
 @import url('topology.css');
+@import url('revealable.css');
 
 #graphs {
     display: block;

pkg/kubernetes/cluster.html

@@ -265,7 +265,7 @@ <h3 class="panel-title"><span class="fa fa-cube"></span> {{container.spec.name}}
             <div class="col-sm-6 kube-more">
               <dl>
                 <dt class="header full" ng-if="container.spec.env.length">Environment</dt>
-                <dd class="kube-id full" ng-repeat="env in container.spec.env">{{env.name}}={{env.value}}</dd>
+                <dd class="kube-id full" revealable-text ng-repeat="env in container.spec.env">{{env.name}}=<span ng-class="{masked: should_mask(env.name)}">{{env.value}}</span></dd>
               </dl>
             </div>
           </div>

pkg/kubernetes/details.js

@@ -34,7 +34,10 @@ define([
 
             angular.extend($scope, {
                 client: client,
-                selection: list
+                selection: list,
+                should_mask: function(name) {
+                    return name.toLowerCase().indexOf("password") !== -1;
+                }
             });
 
             /*

pkg/kubernetes/object-describer.js

@@ -144,7 +144,12 @@ angular.module('kubernetesUI')
     scope: {
       containers: '='
     },
-    templateUrl: 'views/containers.html'
+    templateUrl: 'views/containers.html',
+    link: function($scope, element, attrs) {
+      $scope.shouldMask = function(name) {
+          return name.toLowerCase().indexOf('password') !== -1;
+      };
+    }
   }
 })
 .directive("kubernetesObjectDescribeContainerStatuses", function() {
@@ -165,26 +170,19 @@ angular.module('kubernetesUI')
     templateUrl: 'views/container-state.html'
   };
 })
-.directive("collapseLongText", function() {
+.directive("revealableText", function() {
   return {
     restrict: 'A',
-    scope: {
-      value: '@',
-      enableCollapse: '=?' // not intended to be passed in, it will be set depending on jquery availability
-    },
-    controller: ["$scope", function($scope) {
-      // If jquery is available
-      $scope.enableCollapse = !!window.$;
-    }],
     link: function($scope, element, attrs) {
-      if ($scope.enableCollapse) {
-        $('.reveal-contents-link', element).click(function (evt) {
-          $(this).hide();
-          $('.reveal-contents', element).show();
-        });  
-      }
-    },    
-    templateUrl: 'views/_collapse-long-text.html'
+      element.addClass('revealable');
+      $(element).on("mouseover", function() {
+        var clickable = element[0].scrollWidth > element[0].clientWidth || element.find(".masked")[0];
+        element.toggleClass("clickable", clickable);
+      });
+      $(element).on("click", function() {
+        element.toggleClass("revealed");
+      });
+    }
   }
 })
 .filter("isEmptyObj", function() {
@@ -196,28 +194,19 @@ angular.module('kubernetesUI')
 angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
   'use strict';
 
-  $templateCache.put('views/_collapse-long-text.html',
-    "<span ng-hide=\"enableCollapse && value.length > 120\">{{value}}</span>\n" +
-    "<span ng-show=\"enableCollapse && value.length > 120\">\n" +
-    "  <span class=\"reveal-contents-link\" style=\"cursor: pointer;\" title=\"Expand\">{{value.substring(0, 120)}}<a href=\"javascript:;\">...</a></span>\n" +
-    "  <span style=\"display: none;\" class=\"reveal-contents\">{{value}}</span>\n" +
-    "</span>"
-  );
-
-
   $templateCache.put('views/annotations.html',
     "  <h3>Annotations</h3>\n" +
     "  <span ng-if=\"!resource.metadata.annotations\"><em>none</em></span>\n" +
     "  <dl class=\"dl-horizontal\" ng-if=\"resource.metadata.annotations\">\n" +
     "    <dt ng-repeat-start=\"(annotationKey, annotationValue) in resource.metadata.annotations\" title=\"{{annotationKey}}\">{{annotationKey}}</dt>\n" +
-    "    <dd ng-repeat-end collapse-long-text value=\"{{annotationValue}}\"></dd>\n" +
+    "    <dd ng-repeat-end revealable-text>{{annotationValue}}</dd>\n" +
     "  </dl>"
   );
 
 
   $templateCache.put('views/container-state.html',
     "<span ng-if=\"containerState | isEmptyObj\"><em>none</em></span>\n" +
-    "<span ng-repeat=\"(state, stateDescription) in containerState | limitTo: 1\">\n" +
+    "<span ng-repeat=\"(state, stateDescription) in containerState | limitTo: 1\" revealable-text>\n" +
     "  <span ng-switch=\"state\">\n" +
     "    <span ng-switch-when=\"waiting\">\n" +
     "      Waiting\n" +
@@ -243,7 +232,7 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
     "<div ng-if=\"!containerStatuses\"><em>none</em></div>\n" +
     "<dl ng-repeat=\"containerStatus in containerStatuses | orderBy:'name'\" class=\"dl-horizontal\">\n" +
     "  <dt>Name</dt>\n" +
-    "  <dd>{{containerStatus.name}}</dd>\n" +
+    "  <dd revealable-text>{{containerStatus.name}}</dd>\n" +
     "  <dt>State</dt>\n" +
     "  <dd>\n" +
     "    <kubernetes-object-describe-container-state container-state=\"containerStatus.state\"></container-state>\n" +
@@ -264,9 +253,9 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
     "<div ng-if=\"!containers.length\"><em>none</em></div>\n" +
     "<dl class=\"dl-horizontal\" ng-repeat=\"container in containers\">\n" +
     "<dt>Name</dt>\n" +
-    "<dd>{{container.name}}</dd>\n" +
+    "<dd revealable-text>{{container.name}}</dd>\n" +
     "<dt>Image</dt>\n" +
-    "<dd>{{container.image}}</dd>\n" +
+    "<dd revealable-text>{{container.image}}</dd>\n" +
     "<dt>Ports</dt>\n" +
     "<dd>\n" +
     "  <div ng-if=\"!container.ports.length\"><em>none</em></div>\n" +
@@ -277,7 +266,7 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
     "<dt>Env vars</dt>\n" +
     "<dd>\n" +
     "  <div ng-if=\"!container.env.length\"><em>none</em></div>\n" +
-    "  <div ng-repeat=\"env in container.env | orderBy:'name'\" collapse-long-text value=\"{{env.name}}={{env.value}}\"></div>\n" +
+    "  <div ng-repeat=\"env in container.env | orderBy:'name'\" revealable-text>{{env.name}}=<span ng-class=\"{masked: shouldMask(env.name)}\">{{env.value}}</span></div>\n" +
     "</dd>\n" +
     "</dl>\n" +
     "<div ng-if=\"$index != 0\" style=\"margin-bottom: 10px;\"></div>\n"

pkg/kubernetes/revealable.css

@@ -0,0 +1,46 @@
+.revealable {
+    white-space: nowrap !important;
+    text-overflow: ellipsis;
+    overflow: hidden !important;
+}
+
+.revealable.clickable {
+    cursor: pointer;
+}
+
+.revealed {
+    white-space: normal !important;
+    overflow: visible !important;
+    cursor: pointer;
+    overflow-wrap: break-word;
+}
+
+.masked {
+    color: transparent;
+    position: relative;
+    text-ellipsis: none !important;
+    cursor: pointer;
+    max-width: 1;
+    display: inline-block;
+}
+
+.masked:after {
+    content: "●●●●";
+    position: absolute;
+    left: 0px;
+    font-weight: bold;
+    letter-spacing: 2px;
+    padding-left: 2px;
+    color: black;
+    cursor: pointer;
+    line-height: 1.5;
+    opacity: 0.5;
+}
+
+.revealed .masked:after {
+    display: none;
+}
+
+.revealed .masked {
+    color: black;
+}