Merge pull request #2378 from cdcabrera/issue-envfrom-reveal

Automatic merge from submit-queue. EnvFrom reveal/hide secrets within display modal Reveal and hide secret value display within the EnvFrom modal. Related to issue #2182 ![31894776-594d38c0-b7dd-11e7-89b2-ae614d5a5d6e](https://user-images.githubusercontent.com/3761375/32013910-8ee61cbe-b98a-11e7-97df-f147f35037ec.gif)
openshift · Oct 30, 2017 · fe5fdfe · fe5fdfe
2 parents 39494d0 + 782f6e6
commit fe5fdfe
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 49 deletions.
diff --git a/app/scripts/directives/editEnvironmentFrom.js b/app/scripts/directives/editEnvironmentFrom.js
@@ -5,6 +5,7 @@
       '$attrs',
       '$filter',
       'keyValueEditorUtils',
+      'SecretsService',
       EditEnvironmentFrom
     ],
     bindings: {
@@ -17,7 +18,8 @@
 
   function EditEnvironmentFrom($attrs,
                                $filter,
-                               utils) {
+                               utils,
+                               SecretsService) {
     var ctrl = this;
     var canI = $filter('canI');
     var humanizeKind = $filter('humanizeKind');
@@ -26,11 +28,18 @@
     ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
 
     ctrl.viewOverlayPanel = function(entry) {
+      ctrl.decodedData = entry.data;
       ctrl.overlayPaneEntryDetails = entry;
+
+      if (entry.kind === 'Secret') {
+        ctrl.decodedData = SecretsService.decodeSecretData(entry.data);
+      }
+
       ctrl.overlayPanelVisible = true;
     };
 
     ctrl.closeOverlayPanel = function() {
+      ctrl.showSecret = false;
       ctrl.overlayPanelVisible = false;
     };
 

diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html
@@ -129,11 +129,16 @@
 
   <overlay-panel class="add-config-to-application" show-panel="$ctrl.overlayPanelVisible" show-close="true" handle-close="$ctrl.closeOverlayPanel">
     <div class="dialog-title">
-      <h3>Value Details</h3>
+      <h3>{{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} Details</h3>
     </div>
     <div class="modal-body">
       <h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
-        <small class="muted">&ndash; {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>
+        <small ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'" class="mar-left-sm">
+          <a href=""
+             role="button"
+             ng-click="$ctrl.showSecret = !$ctrl.showSecret">{{$ctrl.showSecret ? "Hide" : "Reveal"}} Secret</a>
+        </small>
+      </h4>
 
       <div ng-if="!($ctrl.overlayPaneEntryDetails.data | size)" class="empty-state-message text-center">
         The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind}} has no properties.
@@ -142,7 +147,7 @@ <h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
       <div ng-if="$ctrl.overlayPaneEntryDetails.data | size" class="table-responsive scroll-shadows-horizontal">
         <table class="table table-bordered table-bordered-columns config-map-table key-value-table">
           <tbody>
-            <tr ng-repeat="(prop, value) in $ctrl.overlayPaneEntryDetails.data">
+            <tr ng-repeat="(prop, value) in $ctrl.decodedData">
               <td class="key">{{prop}}</td>
               <td class="value">
                 <truncate-long-text
@@ -153,7 +158,18 @@ <h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
                   expandable="true">
                 </truncate-long-text>
 
-                <span ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'">&#42;&#42;&#42;&#42;&#42;</span>
+                <span ng-if="!$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'">&#42;&#42;&#42;&#42;&#42;</span>
+                <div ng-if="$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'">
+                  <truncate-long-text
+                    content="value"
+                    limit="50"
+                    newline-limit="2"
+                    expandable="true">
+                  </truncate-long-text>
+                  <div ng-if="decodedData.$$nonprintable[prop]" class="help-block">
+                    This secret value contains non-printable characters and is displayed as a Base64-encoded string.
+                  </div>
+                </div>
               </td>
             </tr>
           </tbody>

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -9219,60 +9219,60 @@ n[e.key] = e.value;
 };
 } ]), function() {
 angular.module("openshiftConsole").component("editEnvironmentFrom", {
-controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
-var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
-a.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e) {
-a.overlayPaneEntryDetails = e, a.overlayPanelVisible = !0;
-}, a.closeOverlayPanel = function() {
-a.overlayPanelVisible = !1;
+controller: [ "$attrs", "$filter", "keyValueEditorUtils", "SecretsService", function(e, t, n, a) {
+var r = this, o = t("canI"), i = t("humanizeKind"), s = _.uniqueId();
+r.setFocusClass = "edit-environment-from-set-focus-" + s, r.viewOverlayPanel = function(e) {
+r.decodedData = e.data, r.overlayPaneEntryDetails = e, "Secret" === e.kind && (r.decodedData = a.decodeSecretData(e.data)), r.overlayPanelVisible = !0;
+}, r.closeOverlayPanel = function() {
+r.showSecret = !1, r.overlayPanelVisible = !1;
 };
-var s = function(e, t) {
+var c = function(e, t) {
 e && e.push(t || {});
 };
-a.onAddRow = function() {
-s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
-}, a.deleteEntry = function(e, t) {
-a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), a.envFromEntries.length || s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
-}, a.hasOptions = function() {
-return !_.isEmpty(a.envFromSelectorOptions);
-}, a.hasEntries = function() {
-return _.some(a.entries, function(e) {
+r.onAddRow = function() {
+c(r.envFromEntries), n.setFocusOn("." + r.setFocusClass);
+}, r.deleteEntry = function(e, t) {
+r.envFromEntries && !r.envFromEntries.length || (r.envFromEntries.splice(e, t), r.envFromEntries.length || c(r.envFromEntries), r.updateEntries(r.envFromEntries), r.editEnvironmentFromForm.$setDirty());
+}, r.hasOptions = function() {
+return !_.isEmpty(r.envFromSelectorOptions);
+}, r.hasEntries = function() {
+return _.some(r.entries, function(e) {
 return _.get(e, "configMapRef.name") || _.get(e, "secretRef.name");
 });
-}, a.isEnvFromReadonly = function(e) {
-return !0 === a.isReadonly || e && !0 === e.isReadonly;
-}, a.groupByKind = function(e) {
-return o(e.kind);
-}, a.dragControlListeners = {
+}, r.isEnvFromReadonly = function(e) {
+return !0 === r.isReadonly || e && !0 === e.isReadonly;
+}, r.groupByKind = function(e) {
+return i(e.kind);
+}, r.dragControlListeners = {
 accept: function(e, t) {
 return e.itemScope.sortableScope.$id === t.$id;
 },
 orderChanged: function() {
-a.editEnvironmentFromForm.$setDirty();
+r.editEnvironmentFromForm.$setDirty();
 }
-}, a.envFromObjectSelected = function(e, t, n) {
-var r = {};
+}, r.envFromObjectSelected = function(e, t, n) {
+var a = {};
 switch (n.kind) {
 case "Secret":
-r.secretRef = {
+a.secretRef = {
 name: n.metadata.name
-}, delete a.envFromEntries[e].configMapRef;
+}, delete r.envFromEntries[e].configMapRef;
 break;
 
 case "ConfigMap":
-r.configMapRef = {
+a.configMapRef = {
 name: n.metadata.name
-}, delete a.envFromEntries[e].secretRef;
+}, delete r.envFromEntries[e].secretRef;
 }
-t.prefix && (r.prefix = t.prefix), _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
-}, a.updateEntries = function(e) {
-a.entries = _.filter(e, function(e) {
+t.prefix && (a.prefix = t.prefix), _.assign(r.envFromEntries[e], a), r.updateEntries(r.envFromEntries);
+}, r.updateEntries = function(e) {
+r.entries = _.filter(e, function(e) {
 return e.secretRef || e.configMapRef;
 });
 };
-var c = function() {
+var l = function() {
 var e = {}, t = {};
-a.envFromEntries = a.entries || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromSelectorOptions, function(n) {
+r.envFromEntries = r.entries || [], r.envFromEntries.length || c(r.envFromEntries), _.each(r.envFromSelectorOptions, function(n) {
 switch (n.kind) {
 case "ConfigMap":
 e[n.metadata.name] = n;
@@ -9281,18 +9281,18 @@ break;
 case "Secret":
 t[n.metadata.name] = n;
 }
-}), _.each(a.envFromEntries, function(n) {
-var a, o;
-if (n.configMapRef && (a = "configMapRef", o = "configmaps"), n.secretRef && (a = "secretRef", o = "secrets"), a && o) {
+}), _.each(r.envFromEntries, function(n) {
+var a, r;
+if (n.configMapRef && (a = "configMapRef", r = "configmaps"), n.secretRef && (a = "secretRef", r = "secrets"), a && r) {
 var i = n[a].name;
-n.configMapRef && i in e && (n.selectedEnvFrom = e[i]), n.secretRef && i in t && (n.selectedEnvFrom = t[i]), r(o, "get") || (n.isReadonly = !0);
+n.configMapRef && i in e && (n.selectedEnvFrom = e[i]), n.secretRef && i in t && (n.selectedEnvFrom = t[i]), o(r, "get") || (n.isReadonly = !0);
 }
 });
 };
-a.$onInit = function() {
-c(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && s(a.envFromEntries);
-}, a.$onChanges = function(e) {
-(e.entries || e.envFromSelectorOptions) && c();
+r.$onInit = function() {
+l(), "cannotDelete" in e && (r.cannotDeleteAny = !0), "cannotSort" in e && (r.cannotSort = !0), "showHeader" in e && (r.showHeader = !0), r.envFromEntries && !r.envFromEntries.length && c(r.envFromEntries);
+}, r.$onChanges = function(e) {
+(e.entries || e.envFromSelectorOptions) && l();
 };
 } ],
 bindings: {

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -6770,23 +6770,33 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
     "<div class=\"dialog-title\">\n" +
-    "<h3>Value Details</h3>\n" +
+    "<h3>{{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} Details</h3>\n" +
     "</div>\n" +
     "<div class=\"modal-body\">\n" +
     "<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}\n" +
-    "<small class=\"muted\">&ndash; {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>\n" +
+    "<small ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'Secret'\" class=\"mar-left-sm\">\n" +
+    "<a href=\"\" role=\"button\" ng-click=\"$ctrl.showSecret = !$ctrl.showSecret\">{{$ctrl.showSecret ? \"Hide\" : \"Reveal\"}} Secret</a>\n" +
+    "</small>\n" +
+    "</h4>\n" +
     "<div ng-if=\"!($ctrl.overlayPaneEntryDetails.data | size)\" class=\"empty-state-message text-center\">\n" +
     "The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind}} has no properties.\n" +
     "</div>\n" +
     "<div ng-if=\"$ctrl.overlayPaneEntryDetails.data | size\" class=\"table-responsive scroll-shadows-horizontal\">\n" +
     "<table class=\"table table-bordered table-bordered-columns config-map-table key-value-table\">\n" +
     "<tbody>\n" +
-    "<tr ng-repeat=\"(prop, value) in $ctrl.overlayPaneEntryDetails.data\">\n" +
+    "<tr ng-repeat=\"(prop, value) in $ctrl.decodedData\">\n" +
     "<td class=\"key\">{{prop}}</td>\n" +
     "<td class=\"value\">\n" +
     "<truncate-long-text ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'\" content=\"value\" limit=\"50\" newline-limit=\"2\" expandable=\"true\">\n" +
     "</truncate-long-text>\n" +
-    "<span ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'Secret'\">&#42;&#42;&#42;&#42;&#42;</span>\n" +
+    "<span ng-if=\"!$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'\">&#42;&#42;&#42;&#42;&#42;</span>\n" +
+    "<div ng-if=\"$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'\">\n" +
+    "<truncate-long-text content=\"value\" limit=\"50\" newline-limit=\"2\" expandable=\"true\">\n" +
+    "</truncate-long-text>\n" +
+    "<div ng-if=\"decodedData.$$nonprintable[prop]\" class=\"help-block\">\n" +
+    "This secret value contains non-printable characters and is displayed as a Base64-encoded string.\n" +
+    "</div>\n" +
+    "</div>\n" +
     "</td>\n" +
     "</tr>\n" +
     "</tbody>\n" +