DEV: Remove buffered rendering from admin backup logs

This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.

Previous commit: da66950cf5 in this
series.

This commit affects the display of the backup logs. It is just a
refactor and does not change any functionality.

app/assets/javascripts/admin/components/admin-backups-logs.js.es6

@@ -1,75 +1,73 @@
 import { scheduleOnce } from "@ember/runloop";
 import Component from "@ember/component";
 import discourseDebounce from "discourse/lib/debounce";
-import { renderSpinner } from "discourse/helpers/loading-spinner";
-import { escapeExpression } from "discourse/lib/utilities";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import { observes, on } from "discourse-common/utils/decorators";
 
-export default Component.extend(
-  bufferedRender({
-    classNames: ["admin-backups-logs"],
+export default Component.extend({
+  classNames: ["admin-backups-logs"],
+  showLoadingSpinner: false,
+  hasFormattedLogs: false,
+  noLogsMessage: I18n.t("admin.backups.logs.none"),
 
-    init() {
-      this._super(...arguments);
-      this._reset();
-    },
+  init() {
+    this._super(...arguments);
+    this._reset();
+  },
 
-    _reset() {
-      this.setProperties({ formattedLogs: "", index: 0 });
-    },
+  _reset() {
+    this.setProperties({ formattedLogs: "", index: 0 });
+  },
 
-    _scrollDown() {
-      const div = this.element;
-      div.scrollTop = div.scrollHeight;
-    },
+  _scrollDown() {
+    const div = this.element;
+    div.scrollTop = div.scrollHeight;
+  },
 
-    @on("init")
-    @observes("logs.[]")
-    _resetFormattedLogs() {
-      if (this.logs.length === 0) {
-        this._reset(); // reset the cached logs whenever the model is reset
-        this.rerenderBuffer();
-      }
-    },
-
-    @on("init")
-    @observes("logs.[]")
-    _updateFormattedLogs: discourseDebounce(function() {
-      const logs = this.logs;
-      if (logs.length === 0) return;
-
-      // do the log formatting only once for HELLish performance
-      let formattedLogs = this.formattedLogs;
-      for (let i = this.index, length = logs.length; i < length; i++) {
-        const date = logs[i].get("timestamp"),
-          message = escapeExpression(logs[i].get("message"));
-        formattedLogs += "[" + date + "] " + message + "\n";
-      }
-      // update the formatted logs & cache index
-      this.setProperties({
-        formattedLogs: formattedLogs,
-        index: logs.length
-      });
-      // force rerender
-      this.rerenderBuffer();
-
-      scheduleOnce("afterRender", this, this._scrollDown);
-    }, 150),
-
-    buildBuffer(buffer) {
-      const formattedLogs = this.formattedLogs;
-      if (formattedLogs && formattedLogs.length > 0) {
-        buffer.push("<pre>");
-        buffer.push(formattedLogs);
-        buffer.push("</pre>");
-      } else {
-        buffer.push("<p>" + I18n.t("admin.backups.logs.none") + "</p>");
-      }
-      // add a loading indicator
-      if (this.get("status.isOperationRunning")) {
-        buffer.push(renderSpinner("small"));
-      }
+  @on("init")
+  @observes("logs.[]")
+  _resetFormattedLogs() {
+    if (this.logs.length === 0) {
+      this._reset(); // reset the cached logs whenever the model is reset
+      this.renderLogs();
     }
-  })
-);
+  },
+
+  @on("init")
+  @observes("logs.[]")
+  _updateFormattedLogs: discourseDebounce(function() {
+    const logs = this.logs;
+    if (logs.length === 0) return;
+
+    // do the log formatting only once for HELLish performance
+    let formattedLogs = this.formattedLogs;
+    for (let i = this.index, length = logs.length; i < length; i++) {
+      const date = logs[i].get("timestamp"),
+        message = logs[i].get("message");
+      formattedLogs += "[" + date + "] " + message + "\n";
+    }
+    // update the formatted logs & cache index
+    this.setProperties({
+      formattedLogs: formattedLogs,
+      index: logs.length
+    });
+    // force rerender
+    this.renderLogs();
+
+    scheduleOnce("afterRender", this, this._scrollDown);
+  }, 150),
+
+  renderLogs() {
+    const formattedLogs = this.formattedLogs;
+    if (formattedLogs && formattedLogs.length > 0) {
+      this.set("hasFormattedLogs", true);
+    } else {
+      this.set("hasFormattedLogs", false);
+    }
+    // add a loading indicator
+    if (this.get("status.isOperationRunning")) {
+      this.set("showLoadingSpinner", true);
+    } else {
+      this.set("showLoadingSpinner", false);
+    }
+  }
+});

app/assets/javascripts/admin/templates/components/admin-backups-logs.hbs

@@ -0,0 +1,8 @@
+{{#if hasFormattedLogs}}
+  <pre>{{formattedLogs}}</pre>
+{{else}}
+  <p>{{noLogsMessage}}</p>
+{{/if}}
+{{#if showLoadingSpinner}}
+  <div class="spinner small"></div>
+{{/if}}