Add logs zerostate info and clean up log controller (#1172)

* Add logs zerostate info and clean up log controller

* Fix file formatting

i18n/messages-en.xtb

@@ -588,4 +588,6 @@
 	<translation id="2029236165141474072" key="MSG_GRAPH_MEMORY_AXIS_LABEL" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Name of Y axis showing memory usage.">Memory (bytes)</translation>
 	<translation id="4576303150557908117" key="MSG_GRAPH_CPU_LIMIT_LEGEND_LABEL" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Name of the CPU usage metric as displayed in the legend.">CPU Limit</translation>
 	<translation id="1378300715036317101" key="MSG_GRAPH_DATA_POINT_NOT_AVAILABLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="String to display when data point is not available.">N/A</translation>
+	<translation id="3682516833237634630" key="MSG_LOGS_ZEROSTATE_TITLE" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Title for logs card zerostate in logs page.">There is nothing to display here</translation>
+	<translation id="7594890250973129963" key="MSG_LOGS_ZEROSTATE_TEXT" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Text for logs card zerostate in logs page.">The selected container has not logged any messages yet.</translation>
 </translationbundle>
\ No newline at end of file

i18n/messages-ja.xtb

@@ -777,4 +777,6 @@
 	<translation id="2029236165141474072" key="MSG_GRAPH_MEMORY_AXIS_LABEL" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Name of Y axis showing memory usage.">Memory (bytes)</translation>
 	<translation id="4576303150557908117" key="MSG_GRAPH_CPU_LIMIT_LEGEND_LABEL" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Name of the CPU usage metric as displayed in the legend.">CPU Limit</translation>
 	<translation id="1378300715036317101" key="MSG_GRAPH_DATA_POINT_NOT_AVAILABLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="String to display when data point is not available.">N/A</translation>
+	<translation id="3682516833237634630" key="MSG_LOGS_ZEROSTATE_TITLE" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Title for logs card zerostate in logs page.">There is nothing to display here</translation>
+	<translation id="7594890250973129963" key="MSG_LOGS_ZEROSTATE_TEXT" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Text for logs card zerostate in logs page.">The selected container has not logged any messages yet.</translation>
 </translationbundle>
\ No newline at end of file

src/app/frontend/logs/logs.html

@@ -16,9 +16,15 @@ limitations under the License.
 
 <kd-content-card>
   <kd-content>
-    <md-content layout-padding flex="auto" layout-fill ng-class=ctrl.getStyleClass()>
-    <div ng-repeat="n in ctrl.logsSet track by $index" ng-class=ctrl.getLogsClass()>
-      <pre ng-bind-html="n"></pre>
+    <md-content layout-padding flex="auto" layout-fill ng-class=ctrl.getStyleClass()
+                ng-show="::ctrl.logsSet.length">
+      <div ng-repeat="n in ctrl.logsSet track by $index" ng-class=ctrl.getLogsClass()>
+        <pre ng-bind-html="n"></pre>
+      </div>
+    </md-content>
+    <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.logsSet.length">
+      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_LOGS_ZEROSTATE_TITLE}}</div>
+      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_LOGS_ZEROSTATE_TEXT}}</div>
     </div>
   </kd-content>
 </kd-content-card>

src/app/frontend/logs/logs_controller.js

@@ -21,15 +21,25 @@ export class LogsController {
   /**
    * @param {!backendApi.Logs} podLogs
    * @param {!./logs_service.LogsService} logsService
-   * @param $sce
+   * @param {!angular.$sce} $sce
+   * @param {!angular.$document} $document
    * @ngInject
    */
-  constructor(podLogs, logsService, $sce) {
+  constructor(podLogs, logsService, $sce, $document) {
+    /** @private {!angular.$sce} */
+    this.sce_ = $sce;
+
+    /** @private {!HTMLDocument} */
+    this.document_ = $document[0];
+
     /** @export {!Array<string>} Log set. */
-    this.logsSet = podLogs.logs.map((line) => this.formatLine(line, $sce));
+    this.logsSet = this.sanitizeLogs_(podLogs.logs);
 
     /** @private {!./logs_service.LogsService} */
     this.logsService_ = logsService;
+
+    /** @export */
+    this.i18n = i18n;
   }
 
   /**
@@ -58,28 +68,50 @@ export class LogsController {
     return logsTextColor;
   }
 
+  /**
+   * Removes empty lines and formats logs as HTML.
+   *
+   * @param {!Array<string>} logs
+   * @return {!Array<string>}
+   * @private
+   */
+  sanitizeLogs_(logs) {
+    return logs.filter((line) => line !== '').map((line) => this.formatLine_(line));
+  }
+
   /**
    * Formats the given log line as raw HTML to display to the user.
-   * @returns {string}
+   * @param {string} line
+   * @return {*}
+   * @private
    */
-  formatLine(line, $sce) {
-    let escapedLine = this.escapeHtml(line);
+  formatLine_(line) {
+    let escapedLine = this.escapeHtml_(line);
     let formattedLine = ansi_up.ansi_to_html(escapedLine);
 
     // We know that trustAsHtml is safe here because escapedLine is escaped to
     // not contain any HTML markup, and formattedLine is the result of passing
     // ecapedLine to ansi_to_html, which is known to only add span tags.
-    return $sce.trustAsHtml(formattedLine);
+    return this.sce_.trustAsHtml(formattedLine);
   }
 
   /**
    * Escapes an HTML string (e.g. converts "<foo>bar&baz</foo>" to
    * "&lt;foo&gt;bar&amp;baz&lt;/foo&gt;") by bouncing it through a text node.
-   * @returns {string}
+   * @param {string} html
+   * @return {string}
+   * @private
    */
-  escapeHtml(html) {
-    let div = document.createElement('div');
-    div.appendChild(document.createTextNode(html));
+  escapeHtml_(html) {
+    let div = this.document_.createElement('div');
+    div.appendChild(this.document_.createTextNode(html));
     return div.innerHTML;
   }
 }
+
+const i18n = {
+  /** @export {string} @desc Title for logs card zerostate in logs page. */
+  MSG_LOGS_ZEROSTATE_TITLE: goog.getMsg('There is nothing to display here'),
+  /** @export {string} @desc Text for logs card zerostate in logs page. */
+  MSG_LOGS_ZEROSTATE_TEXT: goog.getMsg('The selected container has not logged any messages yet.'),
+};