EnvFrom Config Map and Secret Link

Setup for config map and secret details link. Styling adjustments per @sg00dwin.
openshift · Oct 16, 2017 · e887e86 · e887e86
1 parent 8b7c0d9
commit e887e86
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 51 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: {
@@ -18,7 +19,8 @@
 
   function EditEnvironmentFrom($attrs,
                                $filter,
-                               utils) {
+                               utils,
+                               SecretsService) {
     var ctrl = this;
 
     var canI = $filter('canI');
@@ -27,6 +29,16 @@
 
     ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
 
+    ctrl.viewOverlayPanel = function(entry) {
+      ctrl.decodedSecretData = SecretsService.decodeSecretData(entry.data);
+      ctrl.overlayPaneEntryDetails = entry;
+      ctrl.overlayPanelVisible = true;
+    };
+
+    ctrl.closeOverlayPanel = function() {
+      ctrl.overlayPanelVisible = false;
+    };
+
     var addEntry = function(entries, entry) {
       entries && entries.push(entry || {});
     };
@@ -61,7 +73,6 @@
       return humanizeKind(object.kind);
     };
 
-    //ctrl.uniqueForValue = utils.uniqueForValue;
     ctrl.dragControlListeners = {
       accept: function (sourceItemHandleScope, destSortableScope) {
         return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;

diff --git a/app/styles/_kve.less b/app/styles/_kve.less
@@ -118,6 +118,7 @@
   .key-value-editor-entry,
   .environment-from-entry {
     display: table;
+    margin-bottom: 15px;
     padding-right: (@as-sortable-item-button-width * 2);
     position: relative;
     table-layout: fixed;
@@ -127,11 +128,12 @@
         float: left;
         padding-right: 5px;
         position: relative;
-        width: 50%;
+        width: auto;
       }
     }
     .environment-from-input {
       float: left;
+      margin-bottom: 0;
       padding-right: 5px;
       width: 100%;
       @media(min-width: @screen-md-min) {
@@ -144,6 +146,13 @@
       }
     }
   }
+  .environment-from-entry {
+    .environment-from-view-details {
+      float: left;
+      line-height: 1;
+      padding: 6px 0 0;
+    }
+  }
 
   .key-value-editor-input .ui-select {
     @media(min-width: @screen-md-min) {
@@ -163,6 +172,7 @@
 .key-value-editor .key-value-editor-input,
 .key-value-editor-header {
   float: left;
+  margin-bottom: 0;
   padding-right: 5px;
   width: 50%;
 }

diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html
@@ -68,6 +68,12 @@
           aria-label="Delete row"
           ng-click="$ctrl.deleteEntry($index, 1)"></a>
       </div>
+      <div class="environment-from-view-details">
+        <a
+          ng-if="entry.selectedEnvFrom"
+          href=""
+          ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
+      </div>
     </div>
 
     <div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
@@ -78,4 +84,44 @@
         ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
     </div>
   </div>
+
+  <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>
+    </div>
+    <div class="modal-body">
+      <h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
+        <small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>
+
+      <div ng-if="!($ctrl.overlayPaneEntryDetails.data | size)" class="empty-state-message text-center">
+        The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} has no properties.
+      </div>
+
+      <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">
+              <td class="key">{{prop}}</td>
+              <td class="value">
+                <truncate-long-text
+                  ng-if="$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'"
+                  content="value"
+                  limit="1024"
+                  newline-limit="20"
+                  expandable="true">
+                </truncate-long-text>
+
+                <span ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'">&#42;&#42;&#42;&#42;&#42;</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button ng-click="$ctrl.closeOverlayPanel()"
+              type="button"
+              class="btn btn-primary pull-right">Close</button>
+    </div>
+  </overlay-panel>
 </ng-form>
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -9139,84 +9139,88 @@ 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;
-var s = function(e, t) {
+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.decodedSecretData = a.decodeSecretData(e.data), r.overlayPaneEntryDetails = e, r.overlayPanelVisible = !0;
+}, r.closeOverlayPanel = function() {
+r.overlayPanelVisible = !1;
+};
+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 && a.addRowLink && s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
-}, a.isEnvFromReadonly = function(e) {
-return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
-}, a.groupByKind = function(e) {
-return o(e.kind);
-}, a.dragControlListeners = {
+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 && r.addRowLink && c(r.envFromEntries), r.updateEntries(r.envFromEntries), r.editEnvironmentFromForm.$setDirty());
+}, r.isEnvFromReadonly = function(e) {
+return r.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(r.envFromSelectorOptions);
+}, 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;
 }
-_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
-}, a.updateEntries = function(e) {
-a.entries = _.filter(e, function(e) {
+_.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(e) {
-a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
-e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
+var l = function(e) {
+r.envFromEntries = e || [], r.envFromEntries.length || c(r.envFromEntries), _.each(r.envFromEntries, function(e) {
+e && (e.configMapRef && !o("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !o("secrets", "get") && (e.isReadonlyValue = !0));
 });
-}, l = function(e) {
+}, u = function(e) {
 var t;
 switch (e.kind) {
 case "ConfigMap":
-t = _.find(a.envFromEntries, {
+t = _.find(r.envFromEntries, {
 configMapRef: {
 name: e.metadata.name
 }
 });
 break;
 
 case "Secret":
-t = _.find(a.envFromEntries, {
+t = _.find(r.envFromEntries, {
 secretRef: {
 name: e.metadata.name
 }
 });
 }
 return t;
 };
-a.checkEntries = function(e, t) {
-return e !== t && !!l(e);
+r.checkEntries = function(e, t) {
+return e !== t && !!u(e);
 };
-var u = function(e, t) {
-a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
-var t = l(e);
+var d = function(e, t) {
+r.cannotAdd = r.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
+var t = u(e);
 t && _.set(t, "selectedEnvFrom", e);
 });
 };
-a.$onInit = function() {
-c(a.entries), u(a.entries, a.envFromSelectorOptions), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "isReadonly" in e && (a.isReadonlyAny = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && s(a.envFromEntries);
-}, a.$onChanges = function(e) {
-e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
+r.$onInit = function() {
+l(r.entries), d(r.entries, r.envFromSelectorOptions), "cannotDelete" in e && (r.cannotDeleteAny = !0), "cannotSort" in e && (r.cannotSort = !0), "isReadonly" in e && (r.isReadonlyAny = !0), "showHeader" in e && (r.showHeader = !0), r.envFromEntries && !r.envFromEntries.length && c(r.envFromEntries);
+}, r.$onChanges = function(e) {
+e.entries && l(e.entries.currentValue), e.envFromSelectorOptions && d(r.envFromEntries, e.envFromSelectorOptions.currentValue);
 };
 } ],
 bindings: {

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -6643,11 +6643,43 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!$ctrl.cannotSort && $ctrl.entries.length > 1\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +
     "<a ng-if=\"!$ctrl.cannotDeleteAny\" href=\"\" class=\"pficon pficon-close delete-row as-sortable-item-delete\" role=\"button\" aria-label=\"Delete row\" ng-click=\"$ctrl.deleteEntry($index, 1)\"></a>\n" +
     "</div>\n" +
+    "<div class=\"environment-from-view-details\">\n" +
+    "<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
+    "</div>\n" +
     "</div>\n" +
     "<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.cannotAdd\">\n" +
     "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{ $ctrl.addRowLink }}</a>\n" +
     "</div>\n" +
     "</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" +
+    "</div>\n" +
+    "<div class=\"modal-body\">\n" +
+    "<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}\n" +
+    "<small class=\"muted\">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>\n" +
+    "<div ng-if=\"!($ctrl.overlayPaneEntryDetails.data | size)\" class=\"empty-state-message text-center\">\n" +
+    "The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} 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" +
+    "<td class=\"key\">{{prop}}</td>\n" +
+    "<td class=\"value\">\n" +
+    "<truncate-long-text ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'\" content=\"value\" limit=\"1024\" newline-limit=\"20\" expandable=\"true\">\n" +
+    "</truncate-long-text>\n" +
+    "<span ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'Secret'\">&#42;&#42;&#42;&#42;&#42;</span>\n" +
+    "</td>\n" +
+    "</tr>\n" +
+    "</tbody>\n" +
+    "</table>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div class=\"modal-footer\">\n" +
+    "<button ng-click=\"$ctrl.closeOverlayPanel()\" type=\"button\" class=\"btn btn-primary pull-right\">Close</button>\n" +
+    "</div>\n" +
+    "</overlay-panel>\n" +
     "</ng-form>"
   );