Skip to content

Commit e887e86

Browse files
cdcabreracdcabrera
committed
EnvFrom Config Map and Secret Link
Setup for config map and secret details link. Styling adjustments per @sg00dwin.
1 parent 8b7c0d9 commit e887e86

File tree

6 files changed

+155
-51
lines changed

6 files changed

+155
-51
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
'$attrs',
66
'$filter',
77
'keyValueEditorUtils',
8+
'SecretsService',
89
EditEnvironmentFrom
910
],
1011
bindings: {
@@ -18,7 +19,8 @@
1819

1920
function EditEnvironmentFrom($attrs,
2021
$filter,
21-
utils) {
22+
utils,
23+
SecretsService) {
2224
var ctrl = this;
2325

2426
var canI = $filter('canI');
@@ -27,6 +29,16 @@
2729

2830
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
2931

32+
ctrl.viewOverlayPanel = function(entry) {
33+
ctrl.decodedSecretData = SecretsService.decodeSecretData(entry.data);
34+
ctrl.overlayPaneEntryDetails = entry;
35+
ctrl.overlayPanelVisible = true;
36+
};
37+
38+
ctrl.closeOverlayPanel = function() {
39+
ctrl.overlayPanelVisible = false;
40+
};
41+
3042
var addEntry = function(entries, entry) {
3143
entries && entries.push(entry || {});
3244
};
@@ -61,7 +73,6 @@
6173
return humanizeKind(object.kind);
6274
};
6375

64-
//ctrl.uniqueForValue = utils.uniqueForValue;
6576
ctrl.dragControlListeners = {
6677
accept: function (sourceItemHandleScope, destSortableScope) {
6778
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;

‎app/styles/_kve.less

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@
118118
.key-value-editor-entry,
119119
.environment-from-entry {
120120
display: table;
121+
margin-bottom: 15px;
121122
padding-right: (@as-sortable-item-button-width * 2);
122123
position: relative;
123124
table-layout: fixed;
@@ -127,11 +128,12 @@
127128
float: left;
128129
padding-right: 5px;
129130
position: relative;
130-
width: 50%;
131+
width: auto;
131132
}
132133
}
133134
.environment-from-input {
134135
float: left;
136+
margin-bottom: 0;
135137
padding-right: 5px;
136138
width: 100%;
137139
@media(min-width: @screen-md-min) {
@@ -144,6 +146,13 @@
144146
}
145147
}
146148
}
149+
.environment-from-entry {
150+
.environment-from-view-details {
151+
float: left;
152+
line-height: 1;
153+
padding: 6px 0 0;
154+
}
155+
}
147156

148157
.key-value-editor-input .ui-select {
149158
@media(min-width: @screen-md-min) {
@@ -163,6 +172,7 @@
163172
.key-value-editor .key-value-editor-input,
164173
.key-value-editor-header {
165174
float: left;
175+
margin-bottom: 0;
166176
padding-right: 5px;
167177
width: 50%;
168178
}

‎app/views/directives/edit-environment-from.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,12 @@
6868
aria-label="Delete row"
6969
ng-click="$ctrl.deleteEntry($index, 1)"></a>
7070
</div>
71+
<div class="environment-from-view-details">
72+
<a
73+
ng-if="entry.selectedEnvFrom"
74+
href=""
75+
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
76+
</div>
7177
</div>
7278

7379
<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
@@ -78,4 +84,44 @@
7884
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
7985
</div>
8086
</div>
87+
88+
<overlay-panel class="add-config-to-application" show-panel="$ctrl.overlayPanelVisible" show-close="true" handle-close="$ctrl.closeOverlayPanel">
89+
<div class="dialog-title">
90+
<h3>Value Details</h3>
91+
</div>
92+
<div class="modal-body">
93+
<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
94+
<small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>
95+
96+
<div ng-if="!($ctrl.overlayPaneEntryDetails.data | size)" class="empty-state-message text-center">
97+
The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} has no properties.
98+
</div>
99+
100+
<div ng-if="$ctrl.overlayPaneEntryDetails.data | size" class="table-responsive scroll-shadows-horizontal">
101+
<table class="table table-bordered table-bordered-columns config-map-table key-value-table">
102+
<tbody>
103+
<tr ng-repeat="(prop, value) in $ctrl.overlayPaneEntryDetails.data">
104+
<td class="key">{{prop}}</td>
105+
<td class="value">
106+
<truncate-long-text
107+
ng-if="$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'"
108+
content="value"
109+
limit="1024"
110+
newline-limit="20"
111+
expandable="true">
112+
</truncate-long-text>
113+
114+
<span ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'">&#42;&#42;&#42;&#42;&#42;</span>
115+
</td>
116+
</tr>
117+
</tbody>
118+
</table>
119+
</div>
120+
</div>
121+
<div class="modal-footer">
122+
<button ng-click="$ctrl.closeOverlayPanel()"
123+
type="button"
124+
class="btn btn-primary pull-right">Close</button>
125+
</div>
126+
</overlay-panel>
81127
</ng-form>

‎dist/scripts/scripts.js

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9139,84 +9139,88 @@ n[e.key] = e.value;
91399139
};
91409140
} ]), function() {
91419141
angular.module("openshiftConsole").component("editEnvironmentFrom", {
9142-
controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
9143-
var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
9144-
a.setFocusClass = "edit-environment-from-set-focus-" + i;
9145-
var s = function(e, t) {
9142+
controller: [ "$attrs", "$filter", "keyValueEditorUtils", "SecretsService", function(e, t, n, a) {
9143+
var r = this, o = t("canI"), i = t("humanizeKind"), s = _.uniqueId();
9144+
r.setFocusClass = "edit-environment-from-set-focus-" + s, r.viewOverlayPanel = function(e) {
9145+
r.decodedSecretData = a.decodeSecretData(e.data), r.overlayPaneEntryDetails = e, r.overlayPanelVisible = !0;
9146+
}, r.closeOverlayPanel = function() {
9147+
r.overlayPanelVisible = !1;
9148+
};
9149+
var c = function(e, t) {
91469150
e && e.push(t || {});
91479151
};
9148-
a.onAddRow = function() {
9149-
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
9150-
}, a.deleteEntry = function(e, t) {
9151-
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());
9152-
}, a.isEnvFromReadonly = function(e) {
9153-
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
9154-
}, a.groupByKind = function(e) {
9155-
return o(e.kind);
9156-
}, a.dragControlListeners = {
9152+
r.onAddRow = function() {
9153+
c(r.envFromEntries), n.setFocusOn("." + r.setFocusClass);
9154+
}, r.deleteEntry = function(e, t) {
9155+
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());
9156+
}, r.isEnvFromReadonly = function(e) {
9157+
return r.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(r.envFromSelectorOptions);
9158+
}, r.groupByKind = function(e) {
9159+
return i(e.kind);
9160+
}, r.dragControlListeners = {
91579161
accept: function(e, t) {
91589162
return e.itemScope.sortableScope.$id === t.$id;
91599163
},
91609164
orderChanged: function() {
9161-
a.editEnvironmentFromForm.$setDirty();
9165+
r.editEnvironmentFromForm.$setDirty();
91629166
}
9163-
}, a.envFromObjectSelected = function(e, t, n) {
9164-
var r = {};
9167+
}, r.envFromObjectSelected = function(e, t, n) {
9168+
var a = {};
91659169
switch (n.kind) {
91669170
case "Secret":
9167-
r.secretRef = {
9171+
a.secretRef = {
91689172
name: n.metadata.name
9169-
}, delete a.envFromEntries[e].configMapRef;
9173+
}, delete r.envFromEntries[e].configMapRef;
91709174
break;
91719175

91729176
case "ConfigMap":
9173-
r.configMapRef = {
9177+
a.configMapRef = {
91749178
name: n.metadata.name
9175-
}, delete a.envFromEntries[e].secretRef;
9179+
}, delete r.envFromEntries[e].secretRef;
91769180
}
9177-
_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
9178-
}, a.updateEntries = function(e) {
9179-
a.entries = _.filter(e, function(e) {
9181+
_.assign(r.envFromEntries[e], a), r.updateEntries(r.envFromEntries);
9182+
}, r.updateEntries = function(e) {
9183+
r.entries = _.filter(e, function(e) {
91809184
return e.secretRef || e.configMapRef;
91819185
});
91829186
};
9183-
var c = function(e) {
9184-
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9185-
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
9187+
var l = function(e) {
9188+
r.envFromEntries = e || [], r.envFromEntries.length || c(r.envFromEntries), _.each(r.envFromEntries, function(e) {
9189+
e && (e.configMapRef && !o("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !o("secrets", "get") && (e.isReadonlyValue = !0));
91869190
});
9187-
}, l = function(e) {
9191+
}, u = function(e) {
91889192
var t;
91899193
switch (e.kind) {
91909194
case "ConfigMap":
9191-
t = _.find(a.envFromEntries, {
9195+
t = _.find(r.envFromEntries, {
91929196
configMapRef: {
91939197
name: e.metadata.name
91949198
}
91959199
});
91969200
break;
91979201

91989202
case "Secret":
9199-
t = _.find(a.envFromEntries, {
9203+
t = _.find(r.envFromEntries, {
92009204
secretRef: {
92019205
name: e.metadata.name
92029206
}
92039207
});
92049208
}
92059209
return t;
92069210
};
9207-
a.checkEntries = function(e, t) {
9208-
return e !== t && !!l(e);
9211+
r.checkEntries = function(e, t) {
9212+
return e !== t && !!u(e);
92099213
};
9210-
var u = function(e, t) {
9211-
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
9212-
var t = l(e);
9214+
var d = function(e, t) {
9215+
r.cannotAdd = r.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
9216+
var t = u(e);
92139217
t && _.set(t, "selectedEnvFrom", e);
92149218
});
92159219
};
9216-
a.$onInit = function() {
9217-
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);
9218-
}, a.$onChanges = function(e) {
9219-
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
9220+
r.$onInit = function() {
9221+
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);
9222+
}, r.$onChanges = function(e) {
9223+
e.entries && l(e.entries.currentValue), e.envFromSelectorOptions && d(r.envFromEntries, e.envFromSelectorOptions.currentValue);
92209224
};
92219225
} ],
92229226
bindings: {

‎dist/scripts/templates.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6643,11 +6643,43 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
66436643
"<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" +
66446644
"<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" +
66456645
"</div>\n" +
6646+
"<div class=\"environment-from-view-details\">\n" +
6647+
"<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
6648+
"</div>\n" +
66466649
"</div>\n" +
66476650
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.cannotAdd\">\n" +
66486651
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{ $ctrl.addRowLink }}</a>\n" +
66496652
"</div>\n" +
66506653
"</div>\n" +
6654+
"<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
6655+
"<div class=\"dialog-title\">\n" +
6656+
"<h3>Value Details</h3>\n" +
6657+
"</div>\n" +
6658+
"<div class=\"modal-body\">\n" +
6659+
"<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}\n" +
6660+
"<small class=\"muted\">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>\n" +
6661+
"<div ng-if=\"!($ctrl.overlayPaneEntryDetails.data | size)\" class=\"empty-state-message text-center\">\n" +
6662+
"The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} has no properties.\n" +
6663+
"</div>\n" +
6664+
"<div ng-if=\"$ctrl.overlayPaneEntryDetails.data | size\" class=\"table-responsive scroll-shadows-horizontal\">\n" +
6665+
"<table class=\"table table-bordered table-bordered-columns config-map-table key-value-table\">\n" +
6666+
"<tbody>\n" +
6667+
"<tr ng-repeat=\"(prop, value) in $ctrl.overlayPaneEntryDetails.data\">\n" +
6668+
"<td class=\"key\">{{prop}}</td>\n" +
6669+
"<td class=\"value\">\n" +
6670+
"<truncate-long-text ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'\" content=\"value\" limit=\"1024\" newline-limit=\"20\" expandable=\"true\">\n" +
6671+
"</truncate-long-text>\n" +
6672+
"<span ng-if=\"$ctrl.overlayPaneEntryDetails.kind === 'Secret'\">&#42;&#42;&#42;&#42;&#42;</span>\n" +
6673+
"</td>\n" +
6674+
"</tr>\n" +
6675+
"</tbody>\n" +
6676+
"</table>\n" +
6677+
"</div>\n" +
6678+
"</div>\n" +
6679+
"<div class=\"modal-footer\">\n" +
6680+
"<button ng-click=\"$ctrl.closeOverlayPanel()\" type=\"button\" class=\"btn btn-primary pull-right\">Close</button>\n" +
6681+
"</div>\n" +
6682+
"</overlay-panel>\n" +
66516683
"</ng-form>"
66526684
);
66536685

0 commit comments

Comments
 (0)