From b85e4d22d9a6f314869d33538eeb98dca0e1672b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:08:07 +0200
Subject: [PATCH 1/6] wc: Remove ABORTED from the list of job status without
 logs #TASK-6489

---
 src/webcomponents/job/job-detail-log.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/job/job-detail-log.js b/src/webcomponents/job/job-detail-log.js
index aac9525a8..e8c908142 100644
--- a/src/webcomponents/job/job-detail-log.js
+++ b/src/webcomponents/job/job-detail-log.js
@@ -115,7 +115,7 @@ export default class JobDetailLog extends LitElement {
     }
 
     async fetchContent(job, params = {}, append = false) {
-        const statusWithoutLogs = ["PENDING", "ABORTED", "QUEUED"];
+        const statusWithoutLogs = ["PENDING", "QUEUED"];
         if (!append) {
             this.content = "";
         }

From de33b127c20c229645f717e32854bc5070eb61c5 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:09:58 +0200
Subject: [PATCH 2/6] wc: Remove unused class btn-small in job-detail-log
 #TASK-6489

---
 src/webcomponents/job/job-detail-log.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/webcomponents/job/job-detail-log.js b/src/webcomponents/job/job-detail-log.js
index e8c908142..9f8baa897 100644
--- a/src/webcomponents/job/job-detail-log.js
+++ b/src/webcomponents/job/job-detail-log.js
@@ -227,10 +227,10 @@ export default class JobDetailLog extends LitElement {
             <div class="jobs-details-log">
                 <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
                     <div class="btn-group command-buttons" role="group">
-                        <button type="button" class="btn btn-light btn-small ${this.command === "head" ? "active" : ""}" @click="${() => this.setCommand("head")}">
+                        <button type="button" class="btn btn-light ${this.command === "head" ? "active" : ""}" @click="${() => this.setCommand("head")}">
                             <i class="fas fa-align-left icon-padding"></i> Head
                         </button>
-                        <button type="button" class="btn btn-light btn-small ${this.command === "tail" ? "active" : ""}" @click="${() => this.setCommand("tail")}">
+                        <button type="button" class="btn btn-light ${this.command === "tail" ? "active" : ""}" @click="${() => this.setCommand("tail")}">
                             <i class="fas fa-align-left icon-padding"></i>
                             Tail
                             <i class="fas fa-sync-alt ${this.command === "tail" && this.job.internal.status.name === "RUNNING" ? "anim-rotate" : "disabled"}"></i>
@@ -239,10 +239,10 @@ export default class JobDetailLog extends LitElement {
                 </div>
                 <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
                     <div class="btn-group" role="group" style="margin-left: 0px">
-                        <button type="button" class="btn btn-light btn-small ${this.type === "stderr" ? "active" : ""}" @click="${() => this.setType("stderr")}">
+                        <button type="button" class="btn btn-light ${this.type === "stderr" ? "active" : ""}" @click="${() => this.setType("stderr")}">
                             <i class="fas fa-exclamation icon-padding"></i> Stderr
                         </button>
-                        <button type="button" class="btn btn-light btn-small ${this.type === "stdout" ? "active" : ""}" @click="${() => this.setType("stdout")}">
+                        <button type="button" class="btn btn-light ${this.type === "stdout" ? "active" : ""}" @click="${() => this.setType("stdout")}">
                             <i class="fas fa-info icon-padding"></i> Stdout
                         </button>
                     </div>

From 0b7c10e5d6a852a43c0c9e13aa4ed304b878561a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:11:39 +0200
Subject: [PATCH 3/6] wc: Fix icon padding in buttons of job-detail-log
 #TASK-6489

---
 src/webcomponents/job/job-detail-log.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/webcomponents/job/job-detail-log.js b/src/webcomponents/job/job-detail-log.js
index 9f8baa897..4a589fc1f 100644
--- a/src/webcomponents/job/job-detail-log.js
+++ b/src/webcomponents/job/job-detail-log.js
@@ -228,10 +228,10 @@ export default class JobDetailLog extends LitElement {
                 <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
                     <div class="btn-group command-buttons" role="group">
                         <button type="button" class="btn btn-light ${this.command === "head" ? "active" : ""}" @click="${() => this.setCommand("head")}">
-                            <i class="fas fa-align-left icon-padding"></i> Head
+                            <i class="fas fa-align-left me-1"></i> Head
                         </button>
                         <button type="button" class="btn btn-light ${this.command === "tail" ? "active" : ""}" @click="${() => this.setCommand("tail")}">
-                            <i class="fas fa-align-left icon-padding"></i>
+                            <i class="fas fa-align-left me-1"></i>
                             Tail
                             <i class="fas fa-sync-alt ${this.command === "tail" && this.job.internal.status.name === "RUNNING" ? "anim-rotate" : "disabled"}"></i>
                         </button>
@@ -240,10 +240,10 @@ export default class JobDetailLog extends LitElement {
                 <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
                     <div class="btn-group" role="group" style="margin-left: 0px">
                         <button type="button" class="btn btn-light ${this.type === "stderr" ? "active" : ""}" @click="${() => this.setType("stderr")}">
-                            <i class="fas fa-exclamation icon-padding"></i> Stderr
+                            <i class="fas fa-exclamation me-1"></i> Stderr
                         </button>
                         <button type="button" class="btn btn-light ${this.type === "stdout" ? "active" : ""}" @click="${() => this.setType("stdout")}">
-                            <i class="fas fa-info icon-padding"></i> Stdout
+                            <i class="fas fa-info me-1"></i> Stdout
                         </button>
                     </div>
                 </div>

From 7194b11045bf17ffc8976942abedfc2c5c362e1a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:22:55 +0200
Subject: [PATCH 4/6] wc: Fix detail logs buttons and remove unused styles
 #TASK-6489

---
 src/webcomponents/job/job-detail-log.js | 68 +++++++------------------
 1 file changed, 17 insertions(+), 51 deletions(-)

diff --git a/src/webcomponents/job/job-detail-log.js b/src/webcomponents/job/job-detail-log.js
index 4a589fc1f..9ef764de9 100644
--- a/src/webcomponents/job/job-detail-log.js
+++ b/src/webcomponents/job/job-detail-log.js
@@ -18,7 +18,6 @@ import {LitElement, html} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 import NotificationUtils from "../commons/utils/notification-utils.js";
 
-
 export default class JobDetailLog extends LitElement {
 
     constructor() {
@@ -170,29 +169,9 @@ export default class JobDetailLog extends LitElement {
     render() {
         return html`
             <style>
-                .wrapper {
-                    height: 35px;
-                    margin-top: 5px;
-                }
-
                 .log-wrapper {
                     min-height: 150px;
                 }
-
-                .wrapper fieldset.log-type {
-                    float: left;
-                    width: 200px;
-                }
-
-                .wrapper-label {
-                    color: grey;
-                    vertical-align: text-bottom;
-                }
-
-                .jobs-details-log .content-pills {
-                    margin: 10px 30px 10px 0;
-                }
-
                 .cursor {
                     width: 7px;
                     height: 16px;
@@ -203,15 +182,6 @@ export default class JobDetailLog extends LitElement {
                     -moz-animation: blink 1s infinite;
                     animation: blink 1s infinite;
                 }
-
-                .jobs-details-log .fa-sync-alt {
-                    margin-left: 10px;
-                }
-
-                .jobs-details-log .fa-sync-alt.disabled {
-                    color: #c5c5c5;
-                }
-
                 @keyframes blink {
                   0% {
                     opacity: 0;
@@ -224,28 +194,24 @@ export default class JobDetailLog extends LitElement {
                   }
                 }
             </style>
-            <div class="jobs-details-log">
-                <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
-                    <div class="btn-group command-buttons" role="group">
-                        <button type="button" class="btn btn-light ${this.command === "head" ? "active" : ""}" @click="${() => this.setCommand("head")}">
-                            <i class="fas fa-align-left me-1"></i> Head
-                        </button>
-                        <button type="button" class="btn btn-light ${this.command === "tail" ? "active" : ""}" @click="${() => this.setCommand("tail")}">
-                            <i class="fas fa-align-left me-1"></i>
-                            Tail
-                            <i class="fas fa-sync-alt ${this.command === "tail" && this.job.internal.status.name === "RUNNING" ? "anim-rotate" : "disabled"}"></i>
-                        </button>
-                    </div>
+            <div class="mb-3">
+                <div class="btn-group me-2">
+                    <button type="button" class="btn btn-light ${this.command === "head" ? "active" : ""}" @click="${() => this.setCommand("head")}">
+                        <i class="fas fa-align-left me-1"></i> Head
+                    </button>
+                    <button type="button" class="btn btn-light ${this.command === "tail" ? "active" : ""}" @click="${() => this.setCommand("tail")}">
+                        <i class="fas fa-align-left me-1"></i>
+                        Tail
+                        <i class="fas fa-sync-alt ${this.command === "tail" && this.job.internal.status.name === "RUNNING" ? "anim-rotate" : "text-secondary"} ms-2"></i>
+                    </button>
                 </div>
-                <div class="btn-group content-pills" role="toolbar" aria-label="toolbar">
-                    <div class="btn-group" role="group" style="margin-left: 0px">
-                        <button type="button" class="btn btn-light ${this.type === "stderr" ? "active" : ""}" @click="${() => this.setType("stderr")}">
-                            <i class="fas fa-exclamation me-1"></i> Stderr
-                        </button>
-                        <button type="button" class="btn btn-light ${this.type === "stdout" ? "active" : ""}" @click="${() => this.setType("stdout")}">
-                            <i class="fas fa-info me-1"></i> Stdout
-                        </button>
-                    </div>
+                <div class="btn-group">
+                    <button type="button" class="btn btn-light ${this.type === "stderr" ? "active" : ""}" @click="${() => this.setType("stderr")}">
+                        <i class="fas fa-exclamation me-1"></i> Stderr
+                    </button>
+                    <button type="button" class="btn btn-light ${this.type === "stdout" ? "active" : ""}" @click="${() => this.setType("stdout")}">
+                        <i class="fas fa-info me-1"></i> Stdout
+                    </button>
                 </div>
             </div>
             <pre class="overflow-x-scroll cmd log-wrapper ${this.command} rounded">${this.content}\n${this.renderCursor()}</pre>

From 14fa000554df6e005f91d12809d35b25a5182d6a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:25:46 +0200
Subject: [PATCH 5/6] styles: Restore rotate animation styles in global.css
 #TASK-6489

---
 styles/css/global.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/styles/css/global.css b/styles/css/global.css
index 61a48b4c3..251d2d9a3 100644
--- a/styles/css/global.css
+++ b/styles/css/global.css
@@ -368,6 +368,15 @@ select.no-data + .select2-container--bootstrap-5.select2-container--open.select2
 .anim-spaceOutUp {
     animation: spaceOutUp .5s infinite;
 }
+.anim-rotate {
+    animation: rotate 1.5s linear infinite;
+}
+
+@keyframes rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
 
 @keyframes float {
     0% {

From 01499ebb488466eed63769348ecfedb4968cef2b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 2 Aug 2024 14:26:44 +0200
Subject: [PATCH 6/6] wc: Fix icon padding in refresh button of job grid
 #TASK-6489

---
 src/webcomponents/job/job-grid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js
index 446a84b62..ab8c428ec 100644
--- a/src/webcomponents/job/job-grid.js
+++ b/src/webcomponents/job/job-grid.js
@@ -693,7 +693,7 @@ export default class JobGrid extends LitElement {
             {
                 render: () => html`
                     <button type="button" data-cy="job-refresh" class="btn btn-light" @click="${() => this.table.bootstrapTable("refresh")}">
-                        <i class="fas fa-sync-alt"></i> Refresh
+                        <i class="fas fa-sync-alt me-1"></i> Refresh
                     </button>
                 `,
             }