Improve display of container env variables (#2160)

i18n/messages-en.xtb

@@ -602,7 +602,7 @@
   <translation id="3190654996078973226" key="MSG_POD_DETAIL_CONTAINERINFO_0" desc="Subtitle at the top of the container details.">Containers</translation>
   <translation id="1970650270984178962" key="MSG_POD_DETAIL_CONTAINERINFO_1" desc="Label for container image.">Image</translation>
   <translation id="1360847805196042023" key="MSG_POD_DETAIL_CONTAINERINFO_2" desc="Label for container environment variables.">Environment variables</translation>
-  <translation id="3109447894831467677" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Label for environment variable that comes from a Config Map">value from ConfigMap {{env.valueFrom.configMapKeyRef.Name}}/{{env.valueFrom.configMapKeyRef.key}}</translation>
+  <translation id="5891342958155783593" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Tooltip on container env variables taken from secret">Show secret value</translation>
   <translation id="7982652991565550562" key="MSG_POD_DETAIL_CONTAINERINFO_4" desc="Label when there is no container environment variables.">-</translation>
   <translation id="7884138906305492767" key="MSG_POD_DETAIL_CONTAINERINFO_5" desc="Label for container commands.">Commands</translation>
   <translation id="6310781543090479387" key="MSG_POD_DETAIL_CONTAINERINFO_6" desc="Label when there is no container commands.">-</translation>

i18n/messages-ja.xtb

@@ -626,7 +626,7 @@
   <translation id="3190654996078973226" key="MSG_POD_DETAIL_CONTAINERINFO_0" desc="Subtitle at the top of the container details.">コンテナ</translation>
   <translation id="1970650270984178962" key="MSG_POD_DETAIL_CONTAINERINFO_1" desc="Label for container image.">イメージ</translation>
   <translation id="1360847805196042023" key="MSG_POD_DETAIL_CONTAINERINFO_2" desc="Label for container environment variables.">環境変数</translation>
-  <translation id="3109447894831467677" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Label for environment variable that comes from a Config Map">コンフィグマップからの値 {{env.valueFrom.configMapKeyRef.Name}}/{{env.valueFrom.configMapKeyRef.key}}</translation>
+  <translation id="5891342958155783593" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Tooltip on container env variables taken from secret">Show secret value</translation>
   <translation id="7982652991565550562" key="MSG_POD_DETAIL_CONTAINERINFO_4" desc="Label when there is no container environment variables.">-</translation>
   <translation id="7884138906305492767" key="MSG_POD_DETAIL_CONTAINERINFO_5" desc="Label for container commands.">コマンド</translation>
   <translation id="6310781543090479387" key="MSG_POD_DETAIL_CONTAINERINFO_6" desc="Label when there is no container commands.">-</translation>

i18n/messages-zh.xtb

@@ -602,7 +602,7 @@
   <translation id="3190654996078973226" key="MSG_POD_DETAIL_CONTAINERINFO_0" desc="Subtitle at the top of the container details.">容器</translation>
   <translation id="1970650270984178962" key="MSG_POD_DETAIL_CONTAINERINFO_1" desc="Label for container image.">镜像</translation>
   <translation id="1360847805196042023" key="MSG_POD_DETAIL_CONTAINERINFO_2" desc="Label for container environment variables.">环境变量</translation>
-  <translation id="3109447894831467677" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Label for environment variable that comes from a Config Map">值取自配置集 {{env.valueFrom.configMapKeyRef.Name}}/{{env.valueFrom.configMapKeyRef.key}}</translation>
+  <translation id="5891342958155783593" key="MSG_POD_DETAIL_CONTAINERINFO_3" desc="Tooltip on container env variables taken from secret">Show secret value</translation>
   <translation id="7982652991565550562" key="MSG_POD_DETAIL_CONTAINERINFO_4" desc="Label when there is no container environment variables.">-</translation>
   <translation id="7884138906305492767" key="MSG_POD_DETAIL_CONTAINERINFO_5" desc="Label for container commands.">命令</translation>
   <translation id="6310781543090479387" key="MSG_POD_DETAIL_CONTAINERINFO_6" desc="Label when there is no container commands.">-</translation>

src/app/externs/backendapi.js

@@ -697,19 +697,28 @@ backendApi.EnvVar;
 
 /**
  * @typedef {{
- *   configMapKeyRef: backendApi.ConfigMapKeyRef
+ *   configMapKeyRef: backendApi.ConfigMapKeyRef,
+ *   secretKeyRef: backendApi.SecretKeyRef
  * }}
  */
 backendApi.EnvVarSource;
 
 /**
  * @typedef {{
- *   Name: string,
+ *   name: string,
  *   key: string,
  * }}
  */
 backendApi.ConfigMapKeyRef;
 
+/**
+ * @typedef {{
+ *   name: string,
+ *   key: string,
+ * }}
+ */
+backendApi.SecretKeyRef;
+
 /**
  * @typedef {{
  *   replicas: number

src/app/frontend/_variables.scss

@@ -63,6 +63,7 @@ $hue-3: rgba(255, 255, 255, .26);
 $hue-4: rgba(255, 255, 255, .12);
 
 $background-1: rgba(158, 158, 158, .2);
+$background-2: rgba(226, 226, 226, .2);
 $overlay-color: $hue-2;
 
 $regular-font-weight: 400;

src/app/frontend/pod/detail/containerinfo.html

@@ -27,16 +27,22 @@ limitations under the License.
       <div ng-if="::container.env.length">
         <div ng-repeat="env in ::container.env"
              layout="row">
-          <span>{{::env.name}}</span><span ng-if="env.valueFrom">
-            <span ng-if="env.valueFrom.configMapKeyRef">
-              (<a ng-href="{{::$ctrl.getEnvConfigMapHref(env.valueFrom.configMapKeyRef)}}">
-                [[value from ConfigMap {{env.valueFrom.configMapKeyRef.Name}}/{{env.valueFrom.configMapKeyRef.key}}|Label for environment variable that comes from a Config Map]]
-              </a>)
-            </span>
-          </span><span>:&nbsp;</span>
-          <kd-middle-ellipsis display-string="{{::env.value}}"
-                              flex="shrink">
-          </kd-middle-ellipsis>
+          <span ng-if="::$ctrl.isHref(env)">
+                {{::env.name}}&nbsp;(<a ng-href="{{::$ctrl.getRefObjectHref(env)}}">{{::$ctrl.getRefObjectName(env)}}</a>):&nbsp;
+                <span ng-if="::$ctrl.isSecret(env)">
+                    <md-button ng-if="!$ctrl.isSecretVisible" ng-click="::$ctrl.showSecret()" class="md-icon-button kd-env-secret-button">
+                        <i class="material-icons kd-env-secret-icon">visibility</i>
+                        <md-tooltip md-direction="top">[[Show secret value|Tooltip on container env variables taken from secret]]</md-tooltip>
+                    </md-button>
+                    <span ng-if="$ctrl.isSecretVisible" class="kd-env-value">{{::$ctrl.formatSecretValue(env.value)}}</span>
+          </span>
+          <pre class="kd-env-config-map-value"
+               ng-if="!$ctrl.isSecret(env)">{{::env.value}}</pre>
+          </span>
+          <span ng-if="::!$ctrl.isHref(env)">
+                {{::env.name}}:&nbsp;
+                <span class="kd-env-value">{{::env.value}}</span>
+          </span>
         </div>
       </div>
       <div ng-if="::!container.env.length">

src/app/frontend/pod/detail/containerinfo.scss

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../variables';
+
+%kd-env-value-base {
+  background: $background-2;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.kd-env-config-map-value {
+  @extend %kd-env-value-base;
+  border-radius: $baseline-grid;
+  margin: $baseline-grid 0;
+  padding: $baseline-grid;
+}
+
+.kd-env-value {
+  @extend %kd-env-value-base;
+  border-radius: $baseline-grid / 4;
+  font-family: monospace;
+  padding: 1px;
+
+}
+
+.md-button {
+  &.md-icon-button {
+    &.kd-env-secret-button {
+      color: $foreground-2;
+      height: 2.25 * $baseline-grid;
+      min-height: 2.25 * $baseline-grid;
+      padding: 0;
+      width: 2.25 * $baseline-grid;
+    }
+  }
+}
+
+.material-icons {
+  &.kd-env-secret-icon {
+    font-size: 2.25 * $baseline-grid;
+  }
+}

src/app/frontend/pod/detail/containerinfo_component.js

@@ -14,7 +14,7 @@
 
 import {StateParams} from 'common/resource/resourcedetail';
 import {stateName as configMapState} from 'configmap/detail/state';
-import {stateName as shellStateName, StateParams as ShellStateParams} from 'shell/state';
+import {stateName as secretState} from 'secret/detail/state';
 
 /**
  * @final
@@ -22,9 +22,10 @@ import {stateName as shellStateName, StateParams as ShellStateParams} from 'shel
 export default class ContainerInfoController {
   /**
    * @param {!ui.router.$state} $state
+   * @param {!angular.$window} $window
    * @ngInject
    */
-  constructor($state) {
+  constructor($state, $window) {
     /**
      * Initialized from a binding
      * @export {string}
@@ -41,6 +42,84 @@ export default class ContainerInfoController {
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
+
+    /** @export {boolean} */
+    this.isSecretVisible = false;
+
+    /** @private {!angular.$window} */
+    this.window_ = $window;
+  }
+
+  /**
+   * @param {!backendApi.EnvVar} env
+   * @return {string}
+   * @export
+   */
+  getRefObjectHref(env) {
+    if (!env.valueFrom) {
+      return '';
+    }
+
+    if (env.valueFrom.configMapKeyRef) {
+      return this.getEnvConfigMapHref(env.valueFrom.configMapKeyRef);
+    }
+
+    if (env.valueFrom.secretKeyRef) {
+      return this.getEnvSecretHref(env.valueFrom.secretKeyRef);
+    }
+
+    return '';
+  }
+
+  /**
+   * @param {!backendApi.EnvVar} env
+   * @return {boolean}
+   * @export
+   */
+  isSecret(env) {
+    return !!env.valueFrom && !!env.valueFrom.secretKeyRef;
+  }
+
+  /** @export */
+  showSecret() {
+    this.isSecretVisible = true;
+  }
+
+  /**
+   * @param {string} valueB64
+   * @return {string}
+   * @export
+   */
+  formatSecretValue(valueB64) {
+    return this.window_.atob(valueB64);
+  }
+
+  /**
+   * @param {string} valueB64
+   * @return {string}
+   * @export
+   */
+  formatDataValue(valueB64) {
+    return this.window_.atob(valueB64);
+  }
+
+  /**
+   * @param {!backendApi.EnvVar} env
+   * @return {string}
+   * @export
+   */
+  getRefObjectName(env) {
+    return env.valueFrom.configMapKeyRef ? env.valueFrom.configMapKeyRef.name :
+                                           env.valueFrom.secretKeyRef.name;
+  }
+
+  /**
+   * @param {!backendApi.EnvVar} env
+   * @return {boolean}
+   * @export
+   */
+  isHref(env) {
+    return !!env.valueFrom && (!!env.valueFrom.configMapKeyRef || !!env.valueFrom.secretKeyRef);
   }
 
   /**
@@ -49,18 +128,16 @@ export default class ContainerInfoController {
    * @export
    */
   getEnvConfigMapHref(configMapKeyRef) {
-    return this.state_.href(configMapState, new StateParams(this.namespace, configMapKeyRef.Name));
+    return this.state_.href(configMapState, new StateParams(this.namespace, configMapKeyRef.name));
   }
 
-
   /**
-   * @param {!backendApi.Container} container
+   * @param {!backendApi.SecretKeyRef} secretKeyRef
    * @return {string}
    * @export
    */
-  getShellHref(container) {
-    return this.state_.href(
-        shellStateName, new ShellStateParams(this.namespace, this.podName, container.name));
+  getEnvSecretHref(secretKeyRef) {
+    return this.state_.href(secretState, new StateParams(this.namespace, secretKeyRef.name));
   }
 }
 

src/test/frontend/pod/detail/containerinfo_component_test.js

@@ -32,7 +32,7 @@ describe('Container info component', () => {
   });
 
   it('should compute config map href', () => {
-    let cmkr = {Name: 'foo', key: 'bar'};
+    let cmkr = {name: 'foo', key: 'bar'};
     expect(ctrl.getEnvConfigMapHref(cmkr)).toBe('#!/configmap/foo-namespace/foo');
   });
 });