diff --git a/app/scripts/directives/editEnvironmentFrom.js b/app/scripts/directives/editEnvironmentFrom.js
index 709ca35835..227924089a 100644
--- a/app/scripts/directives/editEnvironmentFrom.js
+++ b/app/scripts/directives/editEnvironmentFrom.js
@@ -27,6 +27,15 @@
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
+ ctrl.viewOverlayPanel = function(entry) {
+ ctrl.overlayPaneEntryDetails = entry;
+ ctrl.overlayPanelVisible = true;
+ };
+
+ ctrl.closeOverlayPanel = function() {
+ ctrl.overlayPanelVisible = false;
+ };
+
var addEntry = function(entries, entry) {
entries && entries.push(entry || {});
};
@@ -61,7 +70,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
index 41a2c81835..0da8fc12a8 100644
--- 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
index 2b607be32b..7940c8c551 100644
--- 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}} 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="50"
+ newline-limit="2"
+ expandable="true">
+ </truncate-long-text>
+
+ <span ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'">*****</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
index ccc9b6c85b..030a71a532 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -9151,7 +9151,11 @@ n[e.key] = e.value;
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.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e) {
+a.overlayPaneEntryDetails = e, a.overlayPanelVisible = !0;
+}, a.closeOverlayPanel = function() {
+a.overlayPanelVisible = !1;
+};
var s = function(e, t) {
e && e.push(t || {});
};
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 9085db92dd..4154ddaff9 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -6696,11 +6696,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}} 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=\"50\" newline-limit=\"2\" expandable=\"true\">\n" +
+ "</truncate-long-text>\n" +
+ "<span ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'Secret'\">*****</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>"
);
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 4e87f9cd46..302f538904 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -955,7 +955,6 @@ select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.i
.carousel-inner,.embed-responsive,.modal,.modal-open,.progress{overflow:hidden}
@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}
}
-.membership .ui-select-bootstrap>.ui-select-choices,.typeahead-long{max-height:300px}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-20px;margin-left:-20px}
.navbar-static-top{z-index:1000;border-width:0 0 1px}
.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}
@@ -2352,7 +2351,7 @@ td>.progress:first-child:last-child{margin-bottom:0;margin-top:3px}
.form-inline .combobox-container .input-group-addon,.form-search .combobox-container .input-group-addon{width:auto}
}
.combobox-container:not(.combobox-selected) .glyphicon-remove,.combobox-selected .caret{display:none}
-.typeahead-long{overflow-y:auto}
+.typeahead-long{max-height:300px;overflow-y:auto}
.control-group.error .combobox-container .add-on{color:#B94A48;border-color:#B94A48}
.control-group.error .combobox-container .caret{border-top-color:#B94A48}
.control-group.warning .combobox-container .add-on{color:#C09853;border-color:#C09853}
@@ -5411,7 +5410,7 @@ dl.secret-data pre{margin-bottom:0}
.events-sidebar .events-sidebar-collapse a{text-decoration:none}
.events-sidebar .sidebar-header.right-header{align-items:center;display:flex;justify-content:space-between;margin-top:17.5px}
.events-sidebar .sidebar-header.right-header h2{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-top:10.5px;margin-bottom:10.5px;font-size:14px;display:inline-block}
-.config-map-table .key,.config-map-table .truncated-content,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
+.config-map-table .key,.config-map-table .truncated-content,.edit-yaml .ace_editor.editor,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
.events-sidebar .sidebar-header.right-header h2 .small,.events-sidebar .sidebar-header.right-header h2 small{font-weight:400;line-height:1;color:#9c9c9c;font-size:75%}
.events-sidebar .sidebar-header.right-header .warning-count{white-space:nowrap;margin-left:2px}
.events-sidebar .sidebar-header.right-header .warning-count .pficon{vertical-align:-1px}
@@ -5700,14 +5699,13 @@ alerts+.chromeless .log-loading-msg{margin-top:130px}
.log-line-number:before{content:attr(data-line-number)}
.log-line-number{-ms-user-select:none;border-right:1px #272b30 solid;padding-right:10px;vertical-align:top;white-space:nowrap;width:60px;color:#72767b}
.log-line-text{padding:0 10px;white-space:pre-wrap;width:100%}
-.appended-icon,.project-date [am-time-ago],.projects-list [am-time-ago]{white-space:nowrap}
.log-line-text::-moz-selection{color:#101214;background:#e5e5e5}
.table-log-pods{background-color:#fff;border:1px solid #D1D1D1}
.table-log-pods>tbody+tbody{border-top-width:1px}
.log-fixed-height.empty-state-message{margin-top:0}
.settings-item{margin:4px 8px 4px 0}
.hide-if-empty:empty{display:none!important}
-.appended-icon{display:inline-block}
+.appended-icon{display:inline-block;white-space:nowrap}
.block{display:block}
.text-prepended-icon{align-items:baseline;display:flex}
.nav-pf-vertical{background-color:#292e34;top:41px;transition:width .1s ease-in-out,left .1s ease-in-out;z-index:990}
@@ -5749,6 +5747,7 @@ alerts+.chromeless .log-loading-msg{margin-top:130px}
@media (min-width:992px){.project-additional-info.list-view-pf-additional-info{width:55%}
}
.project-description.list-group-item-text,.project-info .list-view-pf-description{width:100%}
+.project-date [am-time-ago],.projects-list [am-time-ago]{white-space:nowrap}
.project-description.list-group-item-text .highlighted-content,.project-description.list-group-item-text .truncated-content{display:block;white-space:pre-line;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
.project-info.list-group-item{border-bottom:0;border-color:#e0e0e0;padding:10px 20px}
@media (min-width:992px){.project-name-item.list-group-item-heading{white-space:normal;width:45%}
@@ -5846,18 +5845,19 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
.environment-from-editor .faux-input-group,.key-value-editor .faux-input-group{border-collapse:separate;display:table;position:relative}
.environment-from-editor .faux-input-group.faux-input-single-input,.key-value-editor .faux-input-group.faux-input-single-input{width:100%}
.environment-from-editor .environment-from-editor-button,.environment-from-editor .key-value-editor-buttons,.key-value-editor .environment-from-editor-button,.key-value-editor .key-value-editor-buttons{position:absolute;right:0;top:0;width:52px}
-.environment-from-editor .environment-from-entry,.environment-from-editor .key-value-editor-entry,.key-value-editor .environment-from-entry,.key-value-editor .key-value-editor-entry{display:table;padding-right:52px;position:relative;table-layout:fixed;width:100%}
-@media (min-width:992px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.environment-from-editor .key-value-editor-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .key-value-editor-entry .environment-from-editor-button{float:left;padding-right:5px;position:relative;width:50%}
+.environment-from-editor .environment-from-entry,.environment-from-editor .key-value-editor-entry,.key-value-editor .environment-from-entry,.key-value-editor .key-value-editor-entry{display:table;margin-bottom:15px;padding-right:52px;position:relative;table-layout:fixed;width:100%}
+@media (min-width:992px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.environment-from-editor .key-value-editor-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .key-value-editor-entry .environment-from-editor-button{float:left;padding-right:5px;position:relative;width:auto}
}
-.environment-from-editor .environment-from-entry .environment-from-input,.environment-from-editor .key-value-editor-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input,.key-value-editor .key-value-editor-entry .environment-from-input{float:left;padding-right:5px;width:100%}
+.environment-from-editor .environment-from-entry .environment-from-input,.environment-from-editor .key-value-editor-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input,.key-value-editor .key-value-editor-entry .environment-from-input{float:left;margin-bottom:0;padding-right:5px;width:100%}
@media (min-width:992px){.environment-from-editor .environment-from-entry .environment-from-input,.environment-from-editor .key-value-editor-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input,.key-value-editor .key-value-editor-entry .environment-from-input{width:50%}
}
.environment-from-editor .environment-from-entry .environment-from-input .faux-input-group,.environment-from-editor .environment-from-entry .environment-from-input .ui-select,.environment-from-editor .key-value-editor-entry .environment-from-input .faux-input-group,.environment-from-editor .key-value-editor-entry .environment-from-input .ui-select,.key-value-editor .environment-from-entry .environment-from-input .faux-input-group,.key-value-editor .environment-from-entry .environment-from-input .ui-select,.key-value-editor .key-value-editor-entry .environment-from-input .faux-input-group,.key-value-editor .key-value-editor-entry .environment-from-input .ui-select{float:left;width:100%}
+.environment-from-editor .environment-from-entry .environment-from-view-details,.key-value-editor .environment-from-entry .environment-from-view-details{float:left;line-height:1;padding:6px 0 0}
.environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:5px}
@media (min-width:992px){.environment-from-editor .key-value-editor-input .ui-select,.key-value-editor .key-value-editor-input .ui-select{float:left;width:50%}
.environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:0;padding-left:5px}
}
-.key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;padding-right:5px;width:50%}
+.key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;margin-bottom:0;padding-right:5px;width:50%}
.environment-from-editor-entry-header,.key-value-editor-entry-header{padding-right:52px}
.environment-from-editor-header,.key-value-editor-header{margin-bottom:5px}
.membership h1 .learn-more-inline{white-space:nowrap;margin-right:10px;margin-left:0px;display:inline-block}
@@ -5879,6 +5879,7 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
.membership .content-pane .select-role small{color:#999;display:inline-block;line-height:1.4;white-space:pre-line}
.membership .content-pane .select-role .active small{color:#c0e0f0}
.membership .content-pane .col-add-role,.membership .content-pane .col-heading,.membership .content-pane .col-name,.membership .content-pane .col-roles,.membership .content-pane .item-row,.membership .content-pane [flex-collapse-fix],.membership .content-pane [flex]{flex-shrink:0;flex-basis:auto}
+.membership .ui-select-bootstrap>.ui-select-choices{max-height:300px}
@media (min-width:480px){.membership .content-pane .col-heading .col-add-role h3,.membership .content-pane .form-new-role .col-roles{display:block}
.membership .content-pane .col-add-role{padding:0;min-width:245px}
.membership .content-pane .col-heading,.membership .content-pane .item-row{border-bottom:none;margin-bottom:none}
@@ -5944,7 +5945,7 @@ notification-drawer-wrapper .expanded-notification.unread .drawer-pf-notificatio
.ace-inline{height:300px}
.ace-inline-small{height:200px}
.ace_editor.dockerfile-mode .ace_constant.ace_numeric,.editor.yaml-mode .ace_constant.ace_numeric{color:inherit}
-.edit-yaml .ace_editor.editor{font-family:Menlo,Monaco,Consolas,monospace;line-height:1.5;width:100%;min-height:140px;height:50vh}
+.edit-yaml .ace_editor.editor{line-height:1.5;width:100%;min-height:140px;height:50vh}
@media (min-height:700px){.edit-yaml .ace_editor.editor{height:60vh}
}
.edit-yaml .ace_editor.editor .ace_gutter{color:#8b8d8f}