Merge pull request #1048 from opencb/TASK-7708

TASK-7708 - Job Logs in tail mode is never updated

Author: jmjuanes

src/webcomponents/commons/grid-commons.js

@@ -336,8 +336,21 @@ export default class GridCommons {
         }
     }
 
+    // get the configuration for the provided modal
+    getModalConfig(name) {
+        let modalConfig = this.modals[name || this.activeModal];
+        // sometimes the modalConfig is a function that returns a modalConfig
+        // for example when the configuration dependes on the selected row in the grid
+        if (modalConfig && typeof modalConfig === "function") {
+            modalConfig = modalConfig(this.context);
+        }
+        return modalConfig;
+    }
+
     // change the current active modal
     changeActiveModal(name) {
+        const prevModal = this.activeModal;
+
         // 1. check if there is a modal rendered
         if (this.activeModal) {
             ModalUtils.close(`GridModal${this.activeModal}`);
@@ -351,6 +364,19 @@ export default class GridCommons {
         this.context.updateComplete.then(() => {
             if (this.activeModal) {
                 ModalUtils.show(`GridModal${this.activeModal}`);
+
+                // 4. if the active modal has changed, we can perform some action
+                if (prevModal !== this.activeModal) {
+                    const modalConfig = this.getModalConfig();
+
+                    // if the clearAfterClosing flag is set, we need to reset the active modal once it is closed
+                    if (modalConfig.clearAfterClosing === true) {
+                        this.registerModalEventListener(this.activeModal, "hidden.bs.modal", () => {
+                            // console.log(`${this.activeModal} modal closed, clearing active modal`);
+                            this.clearActiveModal();
+                        });
+                    }
+                }
             }
         });
     }
@@ -365,15 +391,20 @@ export default class GridCommons {
         this.modals = modals;
     }
 
+    // method to register an event listener on the specified modal
+    registerModalEventListener(modalName, eventName, callback) {
+        if (this.activeModal === modalName) {
+            const modalElement = this.context.querySelector(`#GridModal${modalName}`);
+            if (modalElement) {
+                modalElement.addEventListener(eventName, event => callback(event));
+            }
+        }
+    }
+
     // render the active modal
     renderModals() {
         if (this.activeModal) {
-            let modalConfig = this.modals[this.activeModal];
-            // sometimes the modalConfig is a function that returns a modalConfig
-            // for example when the configuration dependes on the selected row in the grid
-            if (modalConfig && typeof modalConfig === "function") {
-                modalConfig = modalConfig(this.context);
-            }
+            const modalConfig = this.getModalConfig();
             // check if the modalConfig is a valid object
             if (modalConfig && typeof modalConfig.render === "function") {
                 return ModalUtils.create(this.context, `GridModal${this.activeModal}`, modalConfig);

src/webcomponents/job/job-detail-log.js

@@ -23,7 +23,7 @@ export default class JobDetailLog extends LitElement {
     constructor() {
         super();
 
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -47,7 +47,7 @@ export default class JobDetailLog extends LitElement {
         };
     }
 
-    _init() {
+    #init() {
         this._prefix = UtilsNew.randomString(8);
         this._config = this.getDefaultConfig();
 
@@ -56,20 +56,28 @@ export default class JobDetailLog extends LitElement {
         this.content = null;
     }
 
-    async updated(changedProperties) {
+    disconnectedCallback() {
+        clearInterval(this.interval);
+        super.disconnectedCallback();
+    }
+
+    update(changedProperties) {
         if (changedProperties.has("job")) {
             this.jobId = this.job.id;
-            if (this.active) {
-                this.fetchContent(this.job, {command: this.command, type: this.type});
-            }
         }
 
         if (changedProperties.has("active")) {
             this.content = null;
-            this.requestUpdate();
-            await this.updateComplete;
+        }
+
+        super.update(changedProperties);
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has("active") || changedProperties.has("job")) {
             if (this.active) {
                 this.fetchContent(this.job, {command: this.command, type: this.type});
+                this.setReloadInterval();
             } else {
                 this.clearReload();
             }
@@ -93,15 +101,13 @@ export default class JobDetailLog extends LitElement {
     // setInterval makes sense only in case of Tail log
     setReloadInterval() {
         if (this.active && this.command === "tail" && this.job.internal.status.id === "RUNNING") {
-            this.requestUpdate();
             this.interval = setInterval(() => {
-                if ($(".jobs-details-log", this).is(":visible")) {
+                if (this.active) {
                     // tail call is actually head (after the first tail call)
                     this.fetchContent(this.job, {command: "head", offset: this.contentOffset}, true);
                 } else {
                     this.clearReload();
                 }
-                this.requestUpdate();
             }, 10000);
         }
     }

src/webcomponents/job/job-grid.js

@@ -111,6 +111,7 @@ export default class JobGrid extends LitElement {
 
         this.gridCommons.registerModals({
             "view-job": () => ({
+                clearAfterClosing: true, // force to clear the active modal when closed
                 display: {
                     modalTitle: `Job ${this._selectedJobId}`,
                     modalSize: "modal-3xl",
@@ -409,7 +410,6 @@ export default class JobGrid extends LitElement {
         if (UtilsNew.isNotEmpty(params)) {
             html = "<div>";
             for (const key of Object.keys(params)) {
-                debugger
                 html += `<div style="margin: 2px 0; white-space: nowrap">`;
                 // 1. Normal parameter
                 if (typeof params[key] !== "object") {