DEV: Modernize and fix x-console

assets/javascripts/discourse/components/console.hbs

@@ -0,0 +1,7 @@
+<div
+  class="console-logs"
+  {{did-insert this.scrollToBottom}}
+  {{did-update this.scrollToBottom @output}}
+>
+  {{~@output~}}
+</div>

assets/javascripts/discourse/components/console.js

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { bind } from "discourse-common/utils/decorators";
+
+export default class Console extends Component {
+  @bind
+  scrollToBottom() {
+    if (this.args.followOutput) {
+      const element = document.querySelector(".console-logs");
+      element.scrollTop = element.scrollHeight;
+    }
+  }
+}

assets/javascripts/discourse/components/x-console.hbs

@@ -1,3 +0,0 @@
-<div class="logs">
-  {{output}}
-</div>

assets/javascripts/discourse/components/x-console.js

@@ -1,22 +0,0 @@
-import Component from "@ember/component";
-import { observer } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
-
-export default Component.extend({
-  tagName: "",
-
-  _outputChanged: observer("output", function () {
-    scheduleOnce("afterRender", this, "_scrollBottom");
-  }),
-
-  _scrollBottom() {
-    if (this.get("followOutput")) {
-      this.element.scrollTop = this.element.scrollHeight;
-    }
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-    this._scrollBottom();
-  },
-});

assets/javascripts/discourse/templates/upgrade-processes.hbs

@@ -1 +1 @@
-{{x-console output=model.output}}
+<Console @output={{model.output}} />

assets/javascripts/discourse/templates/upgrade-show.hbs

@@ -30,4 +30,4 @@
   </div>
 {{/if}}
 
-{{x-console output=output followOutput=true}}
+<Console @output={{this.output}} @followOutput={{true}} />

assets/stylesheets/common/docker-manager.scss

@@ -1,13 +1,13 @@
 .docker-manager {
-  div.logs {
+  .console-logs {
-    margin-top: 20px;
-    overflow-x: scroll;
-    height: 400px;
-    white-space: pre;
-    font-family: monospace;
     background-color: black;
     color: #ddd;
+    font-family: monospace;
+    height: 400px;
+    margin-top: 20px;
+    overflow-x: scroll;
     padding: 10px;
+    white-space: pre;
   }
 
   .check-circle {