Add auto-refresh time interval setting (#2581)

* Add AutoRefreshTimeInterval setting

* Apply review suggestions

* Fix gulp serve:prod

* Apply review suggestions

i18n/messages-en.xtb

@@ -881,6 +881,8 @@
   <translation id="5876711404835511637" key="MSG_SETTINGS_SETTINGS_4" desc="Items per page parameter name">Items per page</translation>
   <translation id="8451116602974083200" key="MSG_SETTINGS_SETTINGS_5" desc="Items per page parameter description">Max number of items that can be displayed on each list page</translation>
   <translation id="6310132095834954202" key="MSG_SETTINGS_SETTINGS_6" desc="Save button label">Save</translation>
+  <translation id="3527362347741016568" key="MSG_SETTINGS_SETTINGS_7" desc="Auto-refresh time interval parameter name">Auto-refresh time interval</translation>
+  <translation id="2677003006851990822" key="MSG_SETTINGS_SETTINGS_8" desc="Auto-refresh time interval parameter description">Number of seconds between every auto-refresh of logs</translation>
   <translation id="3162800940071393879" key="MSG_SHELL_SHELL_0" desc="Title prefix for the shell card.">Shell in</translation>
   <translation id="6124573494636381071" key="MSG_SHELL_SHELL_1" desc="Title part for the shell card.">in</translation>
   <translation id="2232943352979399383" key="MSG_STATEFULSET_DETAIL_ACTIONBAR_0" desc="Label \'Stateful Set\' which appears at the top of the delete dialog, opened from a stateful set details page.">Stateful Set</translation>

i18n/messages-ja.xtb

@@ -887,6 +887,8 @@
   <translation id="5876711404835511637" key="MSG_SETTINGS_SETTINGS_4" desc="Items per page parameter name">Items per page</translation>
   <translation id="8451116602974083200" key="MSG_SETTINGS_SETTINGS_5" desc="Items per page parameter description">Max number of items that can be displayed on each list page</translation>
   <translation id="6310132095834954202" key="MSG_SETTINGS_SETTINGS_6" desc="Save button label">Save</translation>
+  <translation id="3527362347741016568" key="MSG_SETTINGS_SETTINGS_7" desc="Auto-refresh time interval parameter name">Auto-refresh time interval</translation>
+  <translation id="2677003006851990822" key="MSG_SETTINGS_SETTINGS_8" desc="Auto-refresh time interval parameter description">Number of seconds between every auto-refresh of logs</translation>
   <translation id="3162800940071393879" key="MSG_SHELL_SHELL_0" desc="Title prefix for the shell card.">Shell in</translation>
   <translation id="6124573494636381071" key="MSG_SHELL_SHELL_1" desc="Title part for the shell card.">in</translation>
   <translation id="2232943352979399383" key="MSG_STATEFULSET_DETAIL_ACTIONBAR_0" desc="Label \'Stateful Set\' which appears at the top of the delete dialog, opened from a stateful set details page.">ステートフルセット</translation>

i18n/messages-zh-tw.xtb

@@ -879,6 +879,8 @@
   <translation id="5876711404835511637" key="MSG_SETTINGS_SETTINGS_4" desc="Items per page parameter name">Items per page</translation>
   <translation id="8451116602974083200" key="MSG_SETTINGS_SETTINGS_5" desc="Items per page parameter description">Max number of items that can be displayed on each list page</translation>
   <translation id="6310132095834954202" key="MSG_SETTINGS_SETTINGS_6" desc="Save button label">Save</translation>
+  <translation id="3527362347741016568" key="MSG_SETTINGS_SETTINGS_7" desc="Auto-refresh time interval parameter name">Auto-refresh time interval</translation>
+  <translation id="2677003006851990822" key="MSG_SETTINGS_SETTINGS_8" desc="Auto-refresh time interval parameter description">Number of seconds between every auto-refresh of logs</translation>
   <translation id="3162800940071393879" key="MSG_SHELL_SHELL_0" desc="Title prefix for the shell card.">指令列</translation>
   <translation id="6124573494636381071" key="MSG_SHELL_SHELL_1" desc="Title part for the shell card.">在</translation>
   <translation id="2232943352979399383" key="MSG_STATEFULSET_DETAIL_ACTIONBAR_0" desc="Label \'Stateful Set\' which appears at the top of the scale dialog, opened from a stateful set details page.">Stateful Set</translation>

i18n/messages-zh.xtb

@@ -881,6 +881,8 @@
   <translation id="5876711404835511637" key="MSG_SETTINGS_SETTINGS_4" desc="Items per page parameter name">Items per page</translation>
   <translation id="8451116602974083200" key="MSG_SETTINGS_SETTINGS_5" desc="Items per page parameter description">Max number of items that can be displayed on each list page</translation>
   <translation id="6310132095834954202" key="MSG_SETTINGS_SETTINGS_6" desc="Save button label">Save</translation>
+  <translation id="3527362347741016568" key="MSG_SETTINGS_SETTINGS_7" desc="Auto-refresh time interval parameter name">Auto-refresh time interval</translation>
+  <translation id="2677003006851990822" key="MSG_SETTINGS_SETTINGS_8" desc="Auto-refresh time interval parameter description">Number of seconds between every auto-refresh of logs</translation>
   <translation id="3162800940071393879" key="MSG_SHELL_SHELL_0" desc="Title prefix for the shell card.">命令行</translation>
   <translation id="6124573494636381071" key="MSG_SHELL_SHELL_1" desc="Title part for the shell card.">在</translation>
   <translation id="2232943352979399383" key="MSG_STATEFULSET_DETAIL_ACTIONBAR_0" desc="Label \'Stateful Set\' which appears at the top of the delete dialog, opened from a stateful set details page.">有状态副本集</translation>

src/app/backend/settings/api/types.go

@@ -53,8 +53,9 @@ type SettingsManager interface {
 
 // Settings is a single instance of settings without context.
 type Settings struct {
-	ClusterName  string `json:"clusterName"`
-	ItemsPerPage int    `json:"itemsPerPage"`
+	ClusterName             string `json:"clusterName"`
+	ItemsPerPage            int    `json:"itemsPerPage"`
+	AutoRefreshTimeInterval int    `json:"autoRefreshTimeInterval"`
 }
 
 // Marshal settings into JSON object.
@@ -72,8 +73,9 @@ func Unmarshal(data string) (*Settings, error) {
 
 // defaultSettings contains default values for every setting.
 var defaultSettings = Settings{
-	ClusterName:  "",
-	ItemsPerPage: 10,
+	ClusterName:             "",
+	ItemsPerPage:            10,
+	AutoRefreshTimeInterval: 5,
 }
 
 // GetDefaultSettings returns settings structure, that should be used if there are no

src/app/externs/backendapi.js

@@ -1463,7 +1463,8 @@ backendApi.Controller;
 /**
  * @typedef {{
  *   clusterName: string,
- *   itemsPerPage: number
+ *   itemsPerPage: number,
+ *   autoRefreshTimeInterval: number
  * }}
  */
 backendApi.Settings;

src/app/frontend/chrome/chrome.html

@@ -17,12 +17,13 @@ limitations under the License.
 <md-toolbar class="kd-toolbar">
   <div class="md-toolbar-tools kd-toolbar-tools">
     <div class="kd-logo-bar">
-      <a ui-sref="{{$ctrl.getOverviewStateName()}}" class="kd-toolbar-logo-link">
+      <a ui-sref="{{$ctrl.getOverviewStateName()}}"
+         class="kd-toolbar-logo-link">
         <md-icon md-svg-icon="assets/images/kubernetes-logo.svg"
-                class="kd-toolbar-logo">
+                 class="kd-toolbar-logo">
         </md-icon>
         <md-icon md-svg-icon="assets/images/kubernetes-logo-text.svg"
-                class="kd-toolbar-logo-text">
+                 class="kd-toolbar-logo-text">
         </md-icon>
       </a>
     </div>

src/app/frontend/common/settings/service.js

@@ -89,4 +89,19 @@ export class SettingsService {
     }
     return itemsPerPage;
   }
+
+  /**
+   * Gets currently loaded auto refresh time interval parameter. To load changes from the backend
+   * use load() function.
+   *
+   * @export
+   * @return {number}
+   */
+  getAutoRefreshTimeInterval() {
+    let autoRefreshTimeInterval = 5;
+    if (this.isInitialized_()) {
+      autoRefreshTimeInterval = this.global_.autoRefreshTimeInterval;
+    }
+    return autoRefreshTimeInterval;
+  }
 }

src/app/frontend/logs/component.js

@@ -35,11 +35,11 @@ export class LogsController {
    * @param {!angular.$document} $document
    * @param {!angular.$resource} $resource
    * @param {!angular.$interval} $interval
-   * @param {!angular.$log} $log
    * @param {!../common/errorhandling/dialog.ErrorDialog} errorDialog
+   * @param {!../common/settings/service.SettingsService} kdSettingsService
    * @ngInject
    */
-  constructor(logsService, $sce, $document, $resource, $interval, $log, errorDialog) {
+  constructor(logsService, $sce, $document, $resource, $interval, errorDialog, kdSettingsService) {
     /** @private {!angular.$sce} */
     this.sce_ = $sce;
 
@@ -52,9 +52,6 @@ export class LogsController {
     /** @private {!angular.$interval} */
     this.interval_ = $interval;
 
-    /** @private {!angular.$log} */
-    this.log_ = $log;
-
     /** @export {!./service.LogsService} */
     this.logsService = logsService;
 
@@ -105,8 +102,13 @@ export class LogsController {
 
     /** @export {number} Refresh interval in miliseconds. */
     this.refreshInterval = 5000;
-  }
 
+    /** @private {!angular.$q.Promise|null} */
+    this.intervalPromise_ = null;
+
+    /** @private {!../common/settings/service.SettingsService} */
+    this.settingsService_ = kdSettingsService;
+  }
 
   $onInit() {
     this.container = this.podLogs.info.containerName;
@@ -114,24 +116,30 @@ export class LogsController {
     this.stateParams_ = this.$transition$.params();
     this.updateUiModel(this.podLogs);
     this.topIndex = this.podLogs.logs.length;
-    this.registerIntervalFunction_();
+    this.refreshInterval = this.settingsService_.getAutoRefreshTimeInterval() * 1000;
+  }
+
+  $onDestroy() {
+    if (this.intervalPromise_) {
+      this.interval_.cancel(this.intervalPromise_);
+      this.intervalPromise_ = null;
+    }
   }
 
   /**
-   * Registers interval function used to automatically refresh logs.
+   * Starts and stops interval function used to automatically refresh logs.
    *
    * @private
    */
-  registerIntervalFunction_() {
-    this.interval_(() => {
-      if (this.logsService.getFollowing()) {
-        this.loadNewest();
-        this.log_.info('Automatically refreshed logs');
-      }
-    }, this.refreshInterval);
+  toggleIntervalFunction_() {
+    if (this.intervalPromise_) {
+      this.interval_.cancel(this.intervalPromise_);
+      this.intervalPromise_ = null;
+    } else {
+      this.intervalPromise_ = this.interval_(() => this.loadNewest(), this.refreshInterval);
+    }
   }
 
-
   /**
    * Loads maxLogSize oldest lines of logs.
    * @export
@@ -177,9 +185,7 @@ export class LogsController {
    */
   toggleLogFollow() {
     this.logsService.setFollowing();
-    if (this.logsService.getFollowing()) {
-      this.loadNewest();
-    }
+    this.toggleIntervalFunction_();
   }
 
   /**
@@ -259,9 +265,7 @@ export class LogsController {
 
     // add timestamp if needed
     let showTimestamp = this.logsService.getShowTimestamp();
-    let logLine = showTimestamp ? `${line.timestamp} ${escapedContent}` : escapedContent;
-
-    return logLine;
+    return showTimestamp ? `${line.timestamp} ${escapedContent}` : escapedContent;
   }
 
   /**

src/app/frontend/logs/module.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import settingsServiceModule from '../common/settings/module';
+
 import {logsComponent} from './component';
 import {LogsService} from './service';
 import stateConfig from './stateconfig';
@@ -26,6 +28,7 @@ export default angular
         [
           'ngResource',
           'ui.router',
+          settingsServiceModule.name,
         ])
     .service('logsService', LogsService)
     .component('kdLogs', logsComponent)

src/app/frontend/settings/controller.js

@@ -93,6 +93,7 @@ export class SettingsController {
     let settings = {
       clusterName: this.global.clusterName,
       itemsPerPage: this.global.itemsPerPage,
+      autoRefreshTimeInterval: this.global.autoRefreshTimeInterval,
     };
 
     /** @type {!angular.Resource} */

src/app/frontend/settings/settings.html

@@ -45,6 +45,21 @@ limitations under the License.
         </md-slider-container>
       </kd-settings-entry>
 
+      <kd-settings-entry key="[[Auto-refresh time interval|Auto-refresh time interval parameter name]]"
+                         desc="[[Number of seconds between every auto-refresh of logs|Auto-refresh time interval parameter description]]">
+        <md-slider-container>
+          <md-slider md-discrete
+                     flex
+                     min="1"
+                     max="10"
+                     step="1"
+                     ng-model="$ctrl.global.autoRefreshTimeInterval"
+                     aria-label="autoRefreshTimeInterval">
+          </md-slider>
+          <div class="kd-slider-value">{{$ctrl.global.autoRefreshTimeInterval}}</div>
+        </md-slider-container>
+      </kd-settings-entry>
+
       <div class="kd-settings-control-panel">
         <md-button class="md-raised md-primary"
                    type="submit"